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初始化时，浏览器已删除了todo-item的无效HTML。

您也可以通过将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编译

Answer 2

如果要使用public class Employee { public Guid Id { get; private set; } = Guid.NewGuid(); public string EmployeeName { get; set; } public string Address { get; set; } }标签，则需要在其中使用select标签。

在vue文档中：

option

在您的示例中，您可以像这样使用它：

<select v-model="selected">
  <!-- inline object literal -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

Answer 3

在select标签中，在v-for之前进行v-bind。所以这样做：

<select v-model="selectedGrocery">
  <option v-bind:value="grocery.id" v-for="grocery in groceryList">
      {{grocery.text}}
  </option>

不是这个：

<select v-model="selectedGrocery">
  <option  v-for="grocery in groceryList" v-bind:value="grocery.id">
      {{grocery.text}}
  </option>
</select>

选择选项不起作用Vue js

3 个答案: