Question

使用Vue.js。*

目前，我的代码中的其他两个输入正常工作，但我正在尝试将其从输入更改为如下所示的下拉列表。
这是它编码的当前方式，它工作正常 -

<input v-bind:class="{'is-static': !foodItem.editing}" type="text" class="input" v-model="foodItem.category">

以上编码如何让我完全编辑文本，这在我的场景中对于食物名称和食物价格来说很棒但是当涉及到食物类别时我想在所选字段之间进行更改，这就是我的内容试过。给我的问题是，它甚至可以在触发编辑按钮之前进行编辑。

这是我尝试过的* -

<div v-bind:class="{'is-static': !foodItem.editing}">
   <select v-model="foodItem.category">
      <option>Select Dropdown</option>
      <option>starter</option>
      <option>main</option>
      <option>side</option>
      <option>dessert</option>
   </select>
</div>

当使用上面的代码时，它似乎允许在没有按下编辑但我拥有的情况下进行编辑。

这是与之相关的按钮 -

<button class="button is-fullwidth" v-on:click="editItem(index)">{{ foodItem.editing ? 'Save': 'Edit' }}</button>

Answer 1

如果您想阻止用户修改select字段，您应该根据disabled的值添加foodItem.editing属性：

<select v-model="foodItem.category" :disabled="!foodItem.editing"></select>

这是基于您的代码（JSFiddle）的最小工作示例：

<div id="app">
    <div v-for="(foodItem, index) in foodItems" :key="index">
        <button @click="editItem(foodItem)">{{ foodItem.editing ? 'Save' : 'Edit' }}</button>
        <select v-model="foodItem.category" :disabled="!foodItem.editing">
            <option>starter</option>
            <option>main</option>
            <!-- more options... -->
        </select>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            foodItems: [
                { editing: false, category: 'starter' },
                { editing: false, category: 'main' }
            ]
        },
        methods: {
            editItem(foodItem) {
                foodItem.editing = !foodItem.editing;
            }
        }
    });
</script>

Answer 2

这是我下拉列表的工作解决方案，现在只有在触发编辑按钮之后才可编辑。

<td>
 <div class="select is-rounded" v-if="foodItem.editing">
   <select v-model="foodItem.category">
      <option>Select Dropdown</option>
      <option>starter</option>
      <option>main</option>
      <option>side</option>
      <option>dessert</option>
    </select>
   </div>
       <div v-else>
         <input type="text" class="input is-static" v-bind:value="foodItem.category">
       </div>
</td>

尝试使用is-static

2 个答案: