如何在 Vue 中仅切换此元素

Question

刚开始使用 Vue，我有一个页面，上面有客户信息（电子邮件、电话、姓名、地址、付款信息……）。可以单击每个元素以显示输入表单以编辑所选数据。这是我对电子邮件元素的标记

<label>Email</label>
<div class="customer-email item editable">
   <div v-if="!edit_data" @click="editData">{{customer.email}}</div>
   <form v-if="edit_data">
      <input v-model="customer.email"></b-input>
      <button @click="saveData">Save</button>
   </form>
</div>

为了实现隐藏数据和显示输入以更新数据的功能，我有以下内容：

data() {
  return {
     edit_data: false,
     customer: {
        name: 'John Doe',
        email: 'johndoe@gmail.com',
     }
  };
},
methods: {
    editData: function () {
       this.edit_data = !this.edit_data;
   },
}

一切都非常简单。但是，如果我有超过 1 个可以编辑的元素，我如何才能让这个功能影响被点击的元素？如果我有这样的标记：

<div>
        <label>Email</label>
        <div class="customer-email item editable">
            <div v-if="!edit_data" @click="editData">{{customer.email}}</div>

            <b-form v-if="edit_data">
                <b-input v-model="customer.email"></b-input>
                <button @click="saveData">Save</button>
            </b-form>
        </div>


        <label>Name</label>
        <div class="customer-name item editable">
            <div v-if="!edit_data" @click="editData">{{customer.name}}</div>

            <form v-if="edit_data">
                <input v-model="customer.email"></b-input>
                <button @click="saveData">Save</button>
            </form>
        </div>
    </div>

当单击一个元素时，它们都会打开，这是有道理的。但这不是我想要的，我只想“打开”被点击的元素。

我知道如何用 jQuery 方式解决这个问题。

$(element).click(function() {
    $(this).sibling(element).show();
    $(this).hide();
});

或类似的东西。

所以我的问题是...... 是否有最佳实践的 Vue 方法来完成这项工作？提前致谢。

Answer 1

您可以在其中创建组件并制作功能：

Vue.component('custom-input', {
  template: '#custom-input',
  props: ['item', 'label'],
  data: function() {
    return {
      value: '',
      edit_data: false,
    }
  },

  methods: {
    editData: function() {
      this.edit_data = !this.edit_data;
    },
    saveData: function() {
      console.log('saved')
    },
  }

});

var vm = new Vue({
  el: '#app',
  data: {
    edit_data: false,
    customer: {
      name: 'John Doe',
      email: 'johndoe@gmail.com',
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<template id="custom-input">
  <div class="customer-email item editable">
    <label>{{label}}</label>
    <div v-if="!edit_data" @click="editData">{{item}}</div>
    <form v-if="edit_data">
      <input v-model="item">
      <button @click="saveData">Save</button>
    </form>
  </div>
</template>


<div id="app">
  <div>
    <custom-input :item="customer.email" :label="'email'"> </custom-input>
    <custom-input :item="customer.name" :label="'Name'"> </custom-input>
  </div>
</div>