Предупреждение VueJS Избегайте мутации напрямую - PullRequest
Новая
       34

Предупреждение VueJS Избегайте мутации напрямую

0 голосов
/ 02 сентября 2018

Я получаю это предупреждение, когда пытаюсь изменить значение пропеллера с помощью директивы @click:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "name"

Мой код выглядит следующим образом: 

<html>
<head>
<title>Vue test</title>
</head>
<body>
<div id="app">
    <user-name name="Flavio"></user-name>

</div>

<script src="assets/js/vue.js"></script>
<script type="text/javascript">
    Vue.component('user-name', {

      props: ['name'],
      template: '<p @click=bio1()>Hi {{ name }}</p>',

      methods: {
        bio1(){
            this.name = "Caleb";
        }
      }
    })

    new Vue({
      el: "#app"
    })
</script>

</body>
</html>

В чем причина этого предупреждения?

1 Ответ

0 голосов
/ 02 сентября 2018

props в VueJS образует одностороннюю привязку данных. Это значит, что вы передаете значения в props дочерним компонентам от родителей и избегаете дочерних компонентов, чтобы изменить эти свойства. Каждый раз, когда родительский компонент обновляется, обновленное значение обновляется также и в дочерних компонентах.

В вашем случае, так как вам нужно обновить значение пропущенной опоры, лучше всего определить вычисляемое свойство, используя значение опоры: 

props: ['name'],
computed: {
  localizedName: function () {
    return this.name.trim()
  }
}

Подробнее об одностороннем потоке данных в VueJS: https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

...