主页 / 问题 / 1176133
Accepted
Mike Kharkov
Asked:2020-09-09 16:57:28 +0000 UTC2020-09-09 16:57:28 +0000 UTC

通过 getter 将数据代理到计算属性（v-model）

  • 772

v-model使用和html标签时，有以下代码<input type="text">：

<template>
  <InputTextApp class="inputTextAdditionData" placeholder_text="" v-model="cell_phone_number">
  </InputTextApp>
</template>


<script>
  import InputTextApp from '~/components/FormElements/InputTextApp';

  export default{

  data () {
    return {
      loading_cell_phone_number: '',
    }
  },

  computed: {
    cell_phone_number: {
      get () {
        return this.loading_cell_phone_number;
      },
      set (value) {
        this.loading_cell_phone_number = value;
      }
    },
}
</script>

问题：
如果必须在计算属性的内容中包含上述代码，我应该如何代理来自 getter 的数据以发出此代码的工作？

作为一个原始测试，我尝试做这样的事情：

// vuex хранилище: tracker.js
const axios = require("axios");

export const getters = {
  
  personTypeInput3: (state) => {
      
    return {index: {
      get () {
        return this.loading_cell_phone_number;
      },
      set (value) {
        this.loading_cell_phone_number = value;
      }
    },
  }}
  
};


<template>
  <InputTextApp class="inputTextAdditionData" placeholder_text="" v-model="cell_phone_number">
  </InputTextApp>
</template>


<script>
  import InputTextApp from '~/components/FormElements/InputTextApp';

  export default{

  data () {
    return {
      loading_cell_phone_number: '',
    }
  },

  computed: {
    cell_phone_number: {
    ...mapGetters("tracker", [
    "personTypeInput3",
    // Here you can import other getters from the products.js
  ])
}
</script>

然后我收到了以下形式的计算属性中的内容代码： 应该在存储 getter 中写什么才能在计算属性中获取第一个实现（在帖子开头）中指定的代码？ （类似的东西：）

在此处输入图像描述





在此处输入图像描述

javascript

1 个回答

  1. Best Answer

    多么大的问题，一读就累死了。

    这里 v-model 和 computed 的使用有点不正确。计算属性通常是在调用时考虑一次的函数，如果至少有一个依赖项已更新并且没有计算新值。无需胡乱计算计算属性存储结果的位置，因为它会自动完成。

    v-model 是最常用于输入元素的指令。假设我们有以下代码：

    <template>
  <MyInput/>
</template>

<script>
  import InputTextApp from '~/components/FormElements/InputTextApp';

  export default{
    data () {
      return {
        phoneNumber: ''
      }
    }
  }
</script>

    phoneNumber，我们需要对和进行双向绑定MyInput。你可以这样做：

    <MyInput
  :value="phoneNumber"
  @input="setPhoneNumberFn"
/>

    ，但你可以这样做：

    <MyInput
  v-model="phoneNumber"
/>

    v-model 只是第一个选项的简写。请注意，此处不需要计算属性，尤其是如此棘手的属性。

    • 2

相关问题