Advanced tag attribute data binding and joining of vue, advanced vue

Advanced tag attribute data binding and joining of vue, advanced vue

After scanning the document on the official vue website, I began to write a website project. Without design, I found a h5 winwin Software Website in Baidu and copied it, think about it a little bad. Let's change the content.
First, a list is displayed.
After the vue instance is ready, add the default data to the object. The list is loaded successfully. Check the source code to see if it is the same as what you want. Currently, only the default array for initialization is displayed. Operations in the list are not added before the jump. Try to add id fields and numbers to the initialized array.
Refresh, no effect, the Chrome of the pitfalls, the cache is particularly serious, have to clear the cache or force refresh. The vue has an error in the console, indicating the content of the tag (<a href = "xxx/detail/{id}"> Article 1 </a>) {id} syntax error. I checked the document and didn't have a similar example. I started to try to rewrite it based on my own experience.
After a while, I found that the document was not ideal. It seems that the reading of the document is not careful enough, so it is necessary to make a targeted effort. We can see that the class of the tag is bound to syle, and the object syntax and array syntax are displayed. If you don't want to talk about it, write the object into tag a first, and refresh the result, I laughed when I found that the href of tag a is detail/[object.
It seems that an error is still used. After reading the description of the array syntax, coding directly, <a v-bind: href = "['xxx/detail/'+ item. id] "> Article 1 </a>.
Why is it the array syntax. Why can't I write in this place like this? I always feel wrong. Look for a similar security picture. How did others write it? I found myself writing too much blood.

First part of the code

<Tr v-for = "item in Strategys" class = "ng-scope">
<Td>
<A class = "ng-binding ng-scope" v-bind: href = "['xxx/detail/'+ item. id] "> {item. name }}</a>
</Td>

Data Block Code

Var vm = new Vue ({
El: '# section-strategies ',
Data :{
ParentMessage: 'parent ',
StrategyCnt: 0,
Strategys: [{id: 1, name: 'Article 1'}, {id: 2, name: 'Article 2'}]
}
})

 

Next, I would like to use Ajax to request data on the server. Initialization and default data cannot be used all the time.