英文:
accessing property values using Alpine.data in a x-for
问题
我正在从API中加载数值并将它们存储在数据对象中，然后将其加载到具有x-init属性的div中。这样我就可以循环遍历数据。它可以正常工作并获取person.name的值，但当我尝试访问person的另一个属性时，什么都不会发生。它只会输出模板中顶部的x-text。
当它们都存在时，为什么我不能同时访问person.name和person.height？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div x-data="dropdown" class="wrapper">
<div x-init="toggle" class="scroll-text">
<h1>STAR WARS API</h1>
<template x-for="person in data">
<div x-text="person.name"></div>
<div x-text="person.height"></div>
</template>
</div>
</div>
<script>
document.addEventListener("alpine:init", () => {
async function loadJSON(url) {
const response = await fetch(url);
return await response.json();
}
Alpine.data("dropdown", () => ({
data: [],
async toggle() {
const resp = await loadJSON("https://swapi.dev/api/people/");
this.data = resp.results;
},
}));
});
</script>
</body>
</html>
希望这可以帮助你解决问题。
英文:
I am loading the values from the API and storing them in the data object and loading it into a div with x-init.
So i can loop through the data. It is working and get the values of person.name but when i try to access another property of person nothing happens. It will only output the top x-text in the template.
How come i cant access person.name and person.height at the same time when they both exist?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div x-data="dropdown" class="wrapper">
<div x-init="toggle" class="scroll-text">
<h1>STAR WARS API</h1>
<template x-for="person in data">
<div x-text="person.name"></div>
<div x-text="person.height"></div>
</template>
</div>
</div>
<script>
document.addEventListener("alpine:init", () => {
async function loadJSON(url) {
const response = await fetch(url);
return await response.json();
}
Alpine.data("dropdown", () => ({
data: [],
async toggle() {
const resp = await loadJSON("https://swapi.dev/api/people/");
this.data = resp.results;
},
}));
});
</script>
</body>
</html>
<!-- end snippet -->
答案1
得分: 2
<template> 元素必须只包含一个根元素。因此，请将其包装在外部的 <div> 中，或者像这样重新构建（对于简单文本）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div x-data="dropdown" class="wrapper">
<div x-init="toggle" class="scroll-text">
<h1>STAR WARS API</h1>
<template x-for="person in data">
<div x-text="`${person.name} - ${person.height} cm`"></div>
</template>
</div>
</div>
<script>
document.addEventListener("alpine:init", () => {
async function loadJSON(url) {
const response = await fetch(url);
return await response.json();
}
Alpine.data("dropdown", () => ({
data: [],
async toggle() {
const resp = await loadJSON("https://swapi.dev/api/people/");
this.data = resp.results;
},
}));
});
</script>
</body>
</html>
英文:
The <template> element must contain only one root element. So wrap it with e.g. an outer <div> or restructure a bit like this (for simple text):
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div x-data="dropdown" class="wrapper">
<div x-init="toggle" class="scroll-text">
<h1>STAR WARS API</h1>
<template x-for="person in data">
<div x-text="`${person.name} - ${person.height} cm`"></div>
</template>
</div>
</div>
<script>
document.addEventListener("alpine:init", () => {
async function loadJSON(url) {
const response = await fetch(url);
return await response.json();
}
Alpine.data("dropdown", () => ({
data: [],
async toggle() {
const resp = await loadJSON("https://swapi.dev/api/people/");
this.data = resp.results;
},
}));
});
</script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论