Question

我有vue模板，每个模板都由 v-show 的功能及其相应的 v-model 的getter和setter切换：

 <p>To : <span v-show="!emailToSW">{{toEmailSet}}</span>
      <input v-show="emailToSW" type="text" v-model.lazy="toEmailSet" />
      <a href="#" @click.prevent="toggleEmailTo();">{{emailToSW ? ' ' : ' '}}</a>
 </p>

 toggleEmailTo(){
   this.emailToSW = !this.emailToSW;
 },

 toEmailSet:{
    get(){
      return this.componentGetObject.toEmail 
    },
    set(val,$event){
      return this.componentSignal({pro:'toEmail',ev:event.target.value}) 
    }

如果只有更改变量名这样的数十对，那就太麻烦了。

有没有办法在这种情况下重构切换和v-model getter和setter，这样它就会接受更多的通用变量，而不是硬编码的toEmail或emailToSW？

加成：实际上我正在为每个对象属性突变使用vuex，如下所示：

Vue.set(state.componentObject, payload.pro, payload.ev)

在安装完成的初始对象时触发：

mounted:function(){
    this.componentObject(this.items) //local state copied to mutations
  }

，冗余功能如下：

<p>Fault Occurring Time: </p>
    <span v-show="!startDateSW">{{startDateSet}}</span>
    <input v-show="startDateSW" type="text" v-model.lazy="startDateSet" />
    <a href="#" @click.prevent="toggleStartDate();">{{startDateSW ? ' ' : ' '}}</a>

几十个人：D 作为item对象的成员：

items:{toEmail:'xxx',startDate:'yyy', ... ...}

Answer 1

我已经使用您的代码和组件实现了一个片段，以对相同的事物进行建模。应该使用value而不是v-model来调用该组件，因为该组件会调用componentSignal而不是发出input事件。

你可以看到它们的工作方式相同并影响相同的事情（我使componentSignal设置了变量的值，但它可以做任何你想做的事情。）

＆＃13;

new Vue({
  el: '#app',
  data: {
    emailToSW: true,
    componentGetObject: {
      toEmail: 'hello'
    }
  },
  methods: {
    toggleEmailTo() {
      this.emailToSW = !this.emailToSW;
    },
    componentSignal(obj) {
      console.log('Set', obj.pro, 'to', obj.val);
      this.componentGetObject[obj.pro] = obj.val;
    }
  },
  computed: {
    toEmailSet: {
      get() {
        return this.componentGetObject.toEmail
      },
      set(val) {
        // set does not return anything
        this.componentSignal({
          pro: 'toEmail',
          val
        })
      }
    }
  },
  components: {
    lockableInput: {
      template: '#lockable-input',
      data() {
        return {locked: false};
      },
      props: ['value', 'signal', 'pro'],
      computed: {
        proxyValue: {
          get() { return this.value; },
          set(newValue) { this.signal({pro: this.pro, val: newValue}); }
        }
      },
      methods: {
        toggleLocked() { this.locked = !this.locked; }
      }
    }
  }
});

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <p>To : <span v-show="!emailToSW">{{toEmailSet}}</span>
    <input v-show="emailToSW" type="text" v-model.lazy="toEmailSet" />
    <a href="#" @click.prevent="toggleEmailTo();">{{emailToSW ? ' ' : ' '}}</a>
  </p>
  <lockable-input :value="componentGetObject.toEmail"
  :signal="componentSignal" pro="toEmail"></lockable-input>
</div>

<template id="lockable-input">
  <p>To : <span v-show="locked">{{proxyValue}}</span>
    <input v-show="!locked" type="text" v-model.lazy="proxyValue" />
    <a href="#" @click.prevent="toggleLocked();">{{locked ? ' ' : ' '}}</a>
  </p>
</template>

＆＃13;

在这种情况下，如何使用get，set和toggle函数重构v-model？

1 个答案: