[Vuejs]-Trying to make this button editable with is-static

by

0👍

✅

This is my working solution for the drop-down, now is only editable until the edit button is triggered. 

<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>

0👍

If you want to prevent the user from editing the select field, you should add the disabled attribute based on the value of foodItem.editing:

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

Here’s a minimal working example based on your code (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>

Leave a comment