Cannot trigger subcomponent update when vue props contains an array

The

sub-component receives an option field. Option has an array whose attribute is column, and the array contains some objects that may have an dicData array. When the dicData is updated, the view update will not be triggered, and the data has indeed been updated. When I change some other data dependencies and trigger the view update, the view related to dicData will be updated. It seems that only one rendering is missing. The relevant code is as follows. Thank you for the answer!

< H2 > try this.$set, is the same result, should not be this problem, option.column is still a response object, option.column print as follows, you can see that all properties have getter,setter function < / H2 >

clipboard.png

parent component


              
            </el-button>
          </span>
        )
      };
      return (
        <el-table data={this.data} {...{ props: this.option }}>
          {this.option.column.map(item => {
            console.log(item.dicData)
            if (item.dicData instanceof Array && item.dicData.length > 0) {
              return (
                <el-table-column
                  {...{ props: item }}
                  scopedSlots={{
                    default: scope => {
                      if (item.multiple) {
                        let labels = ""
                        if (scope.row[item.prop] instanceof Array && scope.row[item.prop].length > 0) {
                          scope.row[item.prop].forEach((v, i) => {
                            const dic = item.dicData.find(e => e.value == v)
                            const line = (i == scope.row[item.prop].length - 1 ? "" : ",")
                            if (dic) labels += dic.label + line
                          })
                        }
                        return labels
                      } else {
                        const dic = item.dicData.find(e => e.value == scope.row[item.prop])
                        if (dic) return dic.label
                      }
                    }
                  }}
                />
              );
            } else {
              return <el-table-column {...{ props: item }} />;
            }
          })}
          <el-table-column label="" scopedSlots={scopedSlots} />
        </el-table>
      );
    }
</script>
Jan.27,2022

has been solved. The crux of the problem lies in the judgment of the render function of the sub-component
if (item.dicData instanceof Array & & item.dicData.length > 0) {/ *. * /}
changed to
if (item.dicData instanceof Array) {/ *. * /}
). It is possible that Vue did not enter this judgment for the first time, and then will not enter it. It is also possible that the length attribute itself is not caused by the response attribute, and the level is limited. I hope some great god will answer why this is so. I will take your answer and temporarily adopt my own


use this.$set to update the dicData object in the array. For example, a property of dicData object is a, and the original value is 1. If you update it this.$set (dicData,'a',10)


in the Filter array, From the point of view of the code, I think you are no longer responsive when using the interface to assign data, you should pay attention to the use of vue.js mutation methods, such as push (), and then combined with the vue.set () method.


The writing of

code is rather messy. Generally speaking, the reason for my guess is that the problems of data changes but views not changed in vue are all caused by the untriggered response mechanism, unlike angular or react , so you only need to pay attention to check whether the attribute value of your set is currently a responsive attribute:

  • when declaring vm.data , try to declare all attributes used as default values (which you have not achieved because several elements in your curOption.column do not declare dictData)
  • if you declare the property in advance in vm.data , use vm.$set to set the new property
  • for array changes, vue has blocked push , splice and other methods. To modify a specific item, it is recommended to use vm.$set to change
  • .
Menu