gpt4 book ai didi

javascript - 选择选项不起作用 Vue js

转载 作者:行者123 更新时间:2023-11-30 14:27:35 25 4
gpt4 key购买 nike

在使用 Vue 练习不同的元素时,我卡在了这一点上。当我尝试创建一个 option template 组件并尝试在 select 中使用它时,它不起作用。

Vue.component('todo-item', {

props: ['todo'],
template: '<option v-bind:value="todo.id">{{todo.text}}</option>'
})

var app = new Vue({
el: '#app',
todo : [],
data: {
message: 'Hello Vue!123',
buttonText: 'Click Me',
seen:true,
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
},
methods:{
buttonClick:() => {
app.message="Button Clicked";
app.seen=true;
}
}
})
table{
width:50%;
border: solid 2px;
}
td{
border: solid 1px;
text-align:center
}
ol{
list-style-type : none;
}
select{
width:30%
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id ="app">
<p v-if="seen">{{message}}</p>
<button v-on:click="buttonClick">
{{buttonText}}
</button>
<br><br>
<input v-model="message"></input>
<br>
<br>
<select>
<todo-item v-for="grocery in groceryList" :todo="grocery">
</select>
<todo-item v-for="grocery in groceryList" :todo="grocery">

</todo-item>

<ul v-for="grocery in groceryList">
<li>
{{ grocery.text }}
</li>
</ul>
</div>

我尝试在 select 标签之外使用它,也尝试在任何其他 html 之外正常工作,如 input

Codepen Link

如果您希望我做任何事情来解释我的问题,请在评论部分告诉我。谢谢

最佳答案

我认为这里的问题不是 Vue 或 Javascript。这就是浏览器处理无效 HTML 的方式。

select 应该只包含 option

如果您在 HTML 中执行此操作(假设根本没有使用 Javascript),

<select>
<todo-item></todo-item>
<todo-item></todo-item>
<todo-item></todo-item>
</select>

浏览器会删除 todo-item 因为它是无效的。 https://codepen.io/jacobgoh101/pen/pZZQRz

在你的例子中,当 Vue 初始化时,浏览器已经删除了无效的 HTML,它是 todo-item

您也可以通过将 select 放入组件中来避免这种情况。演示:https://codepen.io/jacobgoh101/pen/WKKYGm

Vue.component('basic-select', {
template:`
<select>
<slot></slot>
</select>
`
});

像这样使用它

<basic-select>
<todo-item v-for="(grocery,i) in groceryList" :key="i" :todo="grocery">
</basic-select>

这样,Vue 函数将在浏览器不干扰的情况下被应用。

只有在没有使用构建工具和vue-loader的情况下直接在浏览器中使用Vue才会出现这种问题。在典型的 vue-cli 生成的项目中,所有 html 模板都在 Vue 单文件组件中处理,所有 html 将在浏览器使用之前由 Vue 编译

关于javascript - 选择选项不起作用 Vue js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51702556/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com