Vue.js - 数据值未从道具设置答案

【问题标题】：Vue.js - data value does not set from propVue.js - 数据值未从道具设置
【发布时间】：2018-10-30 18:12:20
【问题描述】：

我有什么：两个组件，父级和子级。

父母

<UserName :name=user.name></UserName>
...
components: {UserName},
    data() {
      return {
        user: {
          name: '',
          ...
        }
      }
    },
    created() {
      this.fetchUser()
      console.log(this.user) //<- object as it is expected
    },
    methods: {
      fetchUser() {
        let that = this
        axios.get(//...)
          .then(response => {
            for (let key in response.data) {
              that.user[key] = response.data[key]
            }
          })
        console.log(that.user) //<- object as it is expected
      }
    }

孩子

<h3 v-if="!editing" @click="edit">{{ usersName }}</h3>
<div v-if="editing">
    <div>
        <input type="text" v-model="usersName">
    </div>
</div>
...
props: {
  name: {
    type: String,
    default: ''
  },
},
data() {
  return {
    editing: false,
    usersName: this.name,
    ...
  }
},

问题：即使name prop 设置为child，usersName 数据值为空。我检查了 Vue 调试扩展 - 同样的问题。

到目前为止我尝试了什么（没有任何帮助）：

1)props: ['name']

props: {
  name: {
    type: String
  },
},

3)usersName: JSON.parse(JSON.stringify(this.name))

4) <UserName :name="this.user.name"></UserName>

P。 S. 当我将静态值从父级传递给子级时

<UserName :name="'just a string'"></UserName>

usersName 设置正确。

我还尝试将 name 属性更改为 foobar。我猜name 可能与组件name 完全冲突。但这也没有帮助。

【问题讨论】：

<UserName :name="user.name"></UserName> 在将道具传递给孩子时，您是否错过了user.name 周围的报价？
@Psidom 嗯，我曾经做过其他类似的不带引号的组件。顺便说一句，我试过 wwith qoutes 而没有 - 结果相同。
如果您在使用for 循环更新后that.user 在fetchUser 中会怎样？你看到更新的user了吗？
@Psidom 是的，我也用console.log() 更新了问题

标签： vue.js

【解决方案1】：

应该这样传递... <UserName :name="user.name"></UserName>

如果还没有设置数据属性，可以在mounted钩子中设置名称属性。

mounted() {
    this.usersName = this.name
}

如果这不起作用，那么你的 prop 没有被正确传递。

旁注：我通常在安装的钩子中console.log 来测试这些东西。

【讨论】：

如果您在挂载的钩子中控制台记录道具并且仍然没有任何内容，那么您肯定知道问题是它被传递的方式并且与孩子无关。

【解决方案2】：

user.name 最初为空，后来从 axios 调用中获取值。 usersName 在创建时从 prop 初始化。它获得的值是初始的空值。当user.name 更改时，不会影响子项中已经初始化的data 项。

您可能希望将.sync modifier 与settable computed 一起使用，或者您可能希望放入watch 以将更改从道具传播到孩子。您想要哪种行为尚不清楚。

这是一个使用.sync的示例

new Vue({
  el: '#app',
  data: {
    user: {
      name: ''
    }
  },
  methods: {
    fetchUser() {
      setTimeout(() => {
        this.user.name = 'Slartibartfast'
      }, 800);
    }
  },
  created() {
    this.fetchUser();
  },
  components: {
    userName: {
      template: '#user-name-template',
      props: {
        name: {
          type: String,
          default: ''
        }
      },
      computed: {
        usersName: {
          get() { return this.name; },
          set(value) { this.$emit('update:name', value); }
        }
      },
      data() {
        return {
          editing: false
        }
      }
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  {{user.name}}
  <user-name :name.sync=user.name></user-name>
</div>

<template id="user-name-template">
    <div>
        <input type="text" v-model="usersName">
    </div>
</template>

【讨论】：