Vue binding object, array data cannot be dynamically rendered case detailed explanation

Project scenario:

Dark Horse Vue project management practice, get product classification, modify data attributes in the tab page of the expansion bar

Problem description:

When you click the +new tag tab, an input box pops up for the user to enter the attributes to be added.

The result is that it cannot be rendered immediately when clicked

async getParametersList() {
      this.cat_id = this.currentSelect[this.currentSelect.length - 1];
      const { data: res } = await this.$http.get(
        `categories/${this.cat_id}/attributes`,
        {
          params: { sel: "many" }
        }
      );
      this.paramasData = res.data;
 
      res.data.forEach(item => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
        //Control the display and hiding of the text box item.inputVisible=false
        //The value entered in the text box item.inputValue=''
        console.log(item)
      });
      console.log(this.paramasData);
    },

//Click the button to display the dialog box //Click the button to display the text input box showInput(row) {
      row.inputVisible = true
      // Let the text box automatically get the focus // The function of the $nextTick method is to specify the code in the callback function only after the elements on the page are re-rendered // this.$nextTick((_) => {
      // this.$refs.saveTagInput.$refs.input.focus()
      // })
    },

Cause Analysis:

Refer to this article

https://www.jb51.net/article/222379.htm

It turned out that after obtaining the parameter list, I immediately bound the value bidirectionally, and then added the inputvisible control attribute to the object in each column. As a result, when the button was clicked later, the Inputvisible of each object could not be rendered in real time with the v-if in the input box.

After two-way binding, the property values of the objects in the array are added. There is no way for Vue to bind the getter and setter functions for the objects subsequently added to the array, so there is no way to get real-time rendering.

Solution:

After modifying the data, assign values to the data in data.

Right now

async getParametersList() {
      this.cat_id = this.currentSelect[this.currentSelect.length - 1];
      const { data: res } = await this.$http.get(
        `categories/${this.cat_id}/attributes`,
        {
          params: { sel: "many" }
        }
      );
      
 
      res.data.forEach(item => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
        //Control the display and hiding of the text box item.inputVisible=false
        //The value entered in the text box item.inputValue=''
        console.log(item)
      });
      this.paramasData = res.data;
      console.log(this.paramasData);
    },

This is the end of this article about vue binding objects, array data cannot be dynamically rendered. For more related vue binding objects, array data cannot be dynamically rendered, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Vue+elementUI component recursively implements foldable dynamic rendering multi-level sidebar navigation
Solution to the problem that the src of img in Vue is not displayed when dynamically rendered
Dynamic rendering example of the Vue navigation bar
Example code for Vue form binding (radio button, selection box (single selection, multiple selection, dynamic options rendered with v-for)
Detailed explanation of VUE Element-UI multi-level menu dynamic rendering components

<<: Quickly solve the problem of garbled characters and jump lines in mysql exported scv files

>>: Quickly solve the problems of incorrect format, slow import and data loss when importing data from MySQL