Vue - 如何在 v-model 和 v-for 中使用 Getter / Setting答案

【问题标题】：Vue - How to use Getter / Setting in v-model with v-forVue - 如何在 v-model 和 v-for 中使用 Getter / Setting
【发布时间】：2020-12-12 15:04:38
【问题描述】：

当我在 v-for 循环中使用 getter / setter 时，我的 getter 没有从我的 Vuex Store 中提取数据的某些原因。我没有收到任何错误，只是没有按应有的方式提取数据。

这是我的代码。

我的 v-for 循环（截断）

   <template
      v-for="(detail,index) in details"
    >
      <v-row
        :key="detail.title"
      >
        <v-col
          cols="12"
        >
          <v-textarea
            solo
            auto-grow
            flat
            :placeholder="detail.placeholder"
            v-model="detail.model"
            rows="2"
            row-height="10px"
          ></v-textarea>
         </v-col>
        </v-row>
     </template>

循环来自我的数据元素details：

  details: [
    {
      title: "DESCRIBE YOUR BRIDAL GOWN: WHO DESIGNED IT? WHAT STYLE?", 
      placeholder: "include your details here", 
      model: "gown", 
      showDivider: true 
    },
    {
      title: "WHERE’S YOUR WEDDING? INCLUDE LOCATION DETAILS (E.G., ADDRESS, TYPE, DESTINATION)", 
      placeholder: "include your details here", 
      model: "weddingLocation", 
      showDivider: true 
    },
    {
      title: "WHAT DO YOU WANT YOUR BRIDESMAIDS TO WEAR? THINK PINTEREST BOARDS, NECKLINES, COLORS, AND LENGTH.", 
      placeholder: "include your details here", 
      model: "theme", 
      showDivider: false 
    },
  ]

最后是我的 getter / setter。就其本身而言，在 for 循环之外，它们可以正常工作。所以它不是 store 或 getter/setter，而是循环和那些计算属性之间的交互：

computed: {
...mapGetters('wedding', [
  'returnWedding',
]),
date: {
  get() {
    let day = this.returnWedding.day > 9 ? '' + this.returnWedding.day : '0' + this.returnWedding.day
    let month = this.returnWedding.month > 9 ? '' + this.returnWedding.month : '0' + this.returnWedding.month
    let year = this.returnWedding.year
    return year + "-" + month + "-" + day
  },
  set(value) {
    this.updateLocalWedding({ bridalGown: value })
  }
},
gown: {
  get() {
    return this.returnWedding.bridalGown
  },
  set(value) {
    this.updateLocalWedding({ bridalGown: value })
  }      
},
weddingLocation: {
  get() {
    return this.returnWedding.locationDetails
  },
  set(value) {
    this.updateLocalWedding({ locationDetails: value })
  }
},
theme: {
  get() {
    return this.returnWedding.theme
  },
  set(value) {
    this.updateLocalWedding({ theme: value })
  }
},
}

【问题讨论】：

看不到您正在使用计算属性的任何地方
如果你查看details 数组，它里面有一个model 字段。这些是 getter/setter 的名称，然后由 v-for 放入 v-model 字段中@
这并不意味着什么。 v-model="detail.model" 唯一做的就是允许您设置model 属性的字符串值。这与您的计算属性完全无关。要使用这些，您需要 v-model="gown"、v-model="weddingLocation" 等

标签： vue.js vuex

【解决方案1】：

您尝试做的事情不可能直接实现。

你需要这样的东西

<v-textarea v-model="thisVueInstance[detail.model]" />

为了通过名称引用计算的属性。问题是，你不能像那样在模板中引用当前的 Vue 实例。这些选项都不起作用

<v-textarea v-model="this[detail.model]" />
<v-textarea v-model="[detail.model]" />

我发现确实可行的是设置一个计算属性来返回当前的 Vue 实例，例如

computed: {
  // ...
  form: vm => vm
}

然后在您的模板中使用它作为对象引用库

<v-textarea v-model="form[detail.model]" />

【讨论】：