Vue 2 - 变异道具vue-warn


谦逊的毛巾
2024-12-05 10:44:25 (2月前)


我开始https://laracasts.com/series/learning-

VUE
</跨度>
一步一步的系列。我停止了上课

Vue公司
</跨度>
,Laravel和AJAX出现此错误:

vue.js:2574 [

Vue公司
</跨度>
警告]:避免直接改变道具,因为…在main.js中有这个代码

Vue.component(‘task’,{
模板:‘#task-template’,
道具:[‘list’],
created(){
this.list = JSON.parse(this.list);
}
});


Vue公司
</跨度>
({
el …

15 条回复
  1. 0# 文艺青年3 | 2019-08-31 10-32



    单向数据流,
    根据

    https://vuejs.org/v2/guide/components.html

    ,该组件遵循单向
    数据流,
    所有道具形成子属性和父属性之间的单向向下绑定,当父属性更新时,它将向下流向子而不是相反,这可以防止子组件意外地改变父组件,可以使您的应用程序的数据流更难理解。



    另外,每次父组件都更新所有道具
    在子组件中将刷新最新值。这意味着您不应该尝试改变子组件内的prop。如果你这样做.vue会警告你
    安慰。



    通常有两种情况,它很容易改变道具:
    prop用于传递初始值;子组件之后想要将它用作本地数据属性。
    prop是作为需要转换的原始值传递的。
    这些用例的正确答案是:
    定义使用prop的初始值作为其初始值的本地数据属性:




    1. props: [‘initialCounter’],
      data: function () {
      return { counter: this.initialCounter }
      }

    2. </code>


    定义根据prop的值计算的计算属性:




    1. props: [‘size’],
      computed: {
      normalizedSize: function () {
      return this.size.trim().toLowerCase()
      }
      }

    2. </code>

  2. 1# 1号 | 2019-08-31 10-32



    Vue.js道具不会被改变,因为它被认为是Vue中的反模式。



    您需要采取的方法是在组件上创建引用原始数据的数据属性

    支柱

    的财产

    名单




    1. props: [‘list’],
      data: () {
      return {
      parsedList: JSON.parse(this.list)
      }
      }

    2. </code>


    现在,您传递给组件的列表结构将通过引用并进行变异

    data

    你的组件的属性:-)



    如果您希望做的不仅仅是解析列表属性,那么请使用Vue组件’

    computed

    属性。
    这允许您对道具进行更深入的突变。




    1. props: [‘list’],
      computed: {
      filteredJSONList: () => {
      let parsedList = JSON.parse(this.list)
      let filteredList = parsedList.filter(listItem => listItem.active)
      console.log(filteredList)
      return filteredList
      }
      }

    2. </code>


    上面的例子解析你的

    名单

    道具并将其过滤到仅

    活性
    </强>
    list-tems,将其记录下来

    对于schnitts和咯咯笑
    </强>
    并返回它。




    注意

    :两个

    data

    &安培;

    computed

    属性在模板中引用相同,例如




    1. {{parsedList}}

    2. {{filteredJSONList}}
    3. </code>


    可以很容易地认为a

    computed

    属性(作为一种方法)需要被调用……它没有


  3. 2# biu~额 | 2019-08-31 10-32



    Enestecódigo,estoy usando un filtro para cada lista dentro de un component。 declaro una vaviable buscar de forma local al componente y creo un metodo computed para usar la lista y filtrarla ..




    1. Vue.component(‘comun-list’,{
      props: [‘list’],
      data: function () {
      return {
      buscar: ‘’,
      }
      },
      template: <ul class="list-group">
    2. <li class="list-group-item">
    3. <input type="text" v-model="buscar" class="form-control" />
    4. </li>
    5. <li v-for="item in buscarList" class="list-group-item">
    6. {{item.title}}
    7. </li>
    8. </ul>,
      computed: {
      buscarList: function(){
      return this.list.filter((item) => item.title.includes(this.buscar));
      },
      },
      });

    9. </code>

  4. 3# 谦成 | 2019-08-31 10-32



    不要直接在components中更改道具。如果你需要更改,它会设置一个新属性,如下所示:




    1. data () {
      return () {
      listClone: this.list
      }
      }

    2. </code>


    并更改listClone的值。


  5. 4# 别烦我 | 2019-08-31 10-32




    1. Vue.component(‘task’, {
      template: ‘#task-template’,
      props: [‘list’],
      computed: {
      middleData() {
      return this.list
      }
      },
      watch: {
      list(newVal, oldVal) {
      console.log(newVal)
      this.newList = newVal
      }
      },
      data() {
      return {
      newList: {}
      }
      }
      });
      new Vue({
      el: ‘.container
      })

    2. </code>


    也许这将满足您的需求。


  6. 5# 青年@ | 2019-08-31 10-32



    我也遇到过这个问题。我使用后警告消失了

    $on



    $emit


    这就像使用一样

    $on



    $emit

    建议将数据从子组件发送到父组件。


  7. 6# 独奏♪ | 2019-08-31 10-32



    如果你正在使用Lodash,你可以在返回之前克隆道具。如果您在父项和子项上修改该prop,则此模式很有用。



    假设我们有道具

    名单

    在组件上







    在父组件中
    </强>




    1. </code>



    在子组件中
    </强>




    1. props: [‘list’],
      methods:{
      doSomethingOnClick(entry){
      let modifiedList = .clone(this.list)
      modifiedList =
      .uniq(modifiedList) // Removes duplicates
      this.$emit(‘update:list’, modifiedList)
      }
      }

    2. </code>

  8. 7# star | 2019-08-31 10-32



    除上述内容外,对于有以下问题的其他人:





    “如果不需要props值,因此并不总是返回,则传递的数据将返回

    undefined

    (而不是空)“。这可能会弄得一团糟

    1. </code>


  9. 8# 甲基蓝 | 2019-08-31 10-32



    Vue.js认为这是一种反模式。例如,声明和设置一些道具,如




    1. this.propsVal = new Props Value

    2. </code>


    因此,要解决此问题,您必须从props获取值到数据或Vue实例的计算属性,如下所示:




    1. props: [‘propsVal’],
      data: function() {
      return {
      propVal: this.propsVal
      };
      },
      methods: {

      }

    2. </code>


    这肯定会奏效。


  10. 9# 哇塞 | 2019-08-31 10-32



    您不应该更改子组件中props的值。
    如果你真的需要改变它,你可以使用

    .sync


    像这样









    1. Vue.component(‘task’, {
      template: ‘#task-template’,
      props: [‘list’],
      created() {
      this.$emit(‘update:list’, JSON.parse(this.list))
      }
      });
      new Vue({
      el: ‘.container
      })

    2. </code>

  11. 10# 庸人自扰1 | 2019-08-31 10-32



    你需要像这样添加计算方法




    component.vue
    </强>




    1. props: [‘list’],
      computed: {
      listJson: function(){
      return JSON.parse(this.list);
      }
      }

    2. </code>

  12. 11# 句号了哦哦 | 2019-08-31 10-32



    根据VueJs 2.0,你不应该改变组件内的prop。他们只是由父母变异。因此,您应该在具有不同名称的数据中定义变量,并通过观察实际道具来更新它们。
    如果父级更改了列表道具,您可以解析它并将其分配给mutableList。这是一个完整的解决方案。




    1. Vue.component(‘task’, {
      template: ?


      • {{item.name}}

      ?,
      props: [‘list’],
      data: function () {
      return {
      mutableList = JSON.parse(this.list);
      }
      },
      watch:{
      list: function(){
      this.mutableList = JSON.parse(this.list);
      }
      }
      });

    2. </code>


    它使用mutableList来渲染您的模板,从而使您的列表支持在组件中保持安全。


  13. 12# My☀ | 2019-08-31 10-32



    Vue只是警告你:你改变组件中的prop,但是当父组件重新渲染时,“list”将被覆盖,你将丢失所有的更改。所以这样做很危险。



    使用计算属性,如下所示:




    1. Vue.component(‘task’, {
      template: ‘#task-template’,
      props: [‘list’],
      computed: {
      listJson: function(){
      return JSON.parse(this.list);
      }
      }
      });

    2. </code>

  14. 13# 誓言你好 | 2019-08-31 10-32



    添加到最佳答案,




    1. Vue.component(‘task’, {
      template: ‘#task-template’,
      props: [‘list’],
      data: function () {
      return {
      mutableList: JSON.parse(this.list);
      }
      }
      });

    2. </code>


    通过数组设置道具意味着开发/原型设计,在生产中确保设置道具类型(

    https://vuejs.org/v2/guide/components-props.html

    并且如果尚未由父项填充道具,则设置默认值,如此。




    1. Vue.component(‘task’, {
      template: ‘#task-template’,
      props: {
      list: {
      type: String,
      default() {
      return ‘{}’
      }
      }
      },
      data: function () {
      return {
      mutableList: JSON.parse(this.list);
      }
      }
      });

    2. </code>


    这样你至少得到一个空对象

    mutableList

    如果未定义,则代替JSON.parse错误。


登录 后才能参与评论