Shulou(Shulou.com)06/03 Report--

This article mainly introduces the detailed explanation of the example that the vue data can not be dynamically rendered. In the daily operation, I believe that many people have doubts about the detailed explanation of the example that the vue data cannot be dynamically rendered. The editor consulted all kinds of materials and sorted out a simple and useful method of operation. I hope it will be helpful for you to answer the doubt that the vue data can not be dynamically rendered. Next, please follow the editor to study!

Project scenario:

Vue project management practice, obtain commodity classification, modify and modify data attributes in the tab of the expansion column.

Problem description:

When the + new tag tab is supposed to be clicked, an input box pops up for the user to enter the attributes to be added

As a result, you can't render immediately when you click.

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 (""): []; / / controls the display of the text box and hides the value entered in the item.inputVisible=false / / text box item.inputValue='' console.log (item)}); console.log (this.paramasData) }, / / Click the button to display the dialog box / / Click the button to show the text input box showInput (row) {row.inputVisible = true / / Let the text box automatically gain focus / / $nextTick method, that is, after the elements on the page are re-rendered The code / / this.$nextTick ((_) = > {/ / this.$refs.saveTagInput.$refs.input.focus () /})} in the callback function will be specified for reason analysis:

It turns out that I bidirectionally bound the values immediately after obtaining the parameter list, and then added the inputvisible control attribute to each column of objects, resulting in that when I clicked button, the Inputvisble of each object could not be rendered in real time with the v-if in the input box.

Add the attribute values of the objects in the array after bi-directional binding. There is no way for vue to bind getter to the setter function for the subsequent objects added in the array, so there is no way to get real-time rendering.

Solution:

After the data is modified, the data in data is assigned.

That is,

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 (""): []; / / controls the display and hiding of the text box item.inputValue='' console.log (item)} entered in the item.inputVisible=false / / text box); this.paramasData = res.data; console.log (this.paramasData) }, at this point, the study of "detailed explanation of examples in which vue data cannot be dynamically rendered" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.