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

Question

在使用 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

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

Answer 1

我认为这里的问题不是 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 而不使用构建工具和 vue-loader 时，才会出现这种问题。在典型的 vue-cli 生成的项目中，所有 html 模板都在 Vue 单文件组件内处理，并且所有 html 将在浏览器使用之前由 Vue 编译