Redraw the list.

[MarsZone]

v-for will not redraw the view at v-ons-card/v-ons-list tag when I push the data to list. but it can work like this. <ul> <li v-for="template of templateList" :key="template.label" > <div class="title">{{ template.label }}</div> </li> </ul> Is there a function I can call and redraw the view?

Here is my code.

<v-ons-card v-for="template of templateList" :key="template.label">
      <div class="title">{{ template.label }}</div>
 </v-ons-card>

//Script

export default {
    data () {
      return {
        templateList: [
          {
            id : "100",
            tid:"1",
            label: 'xDefault',
          }
        ]
      }
    },
    created(){
      Bus.$on('tabChange',this.tabHandler);
    },
    beforeDestroy () {
      Bus.$off('tabChange', this.tabHandler)
    },
    mounted(){

    },
    methods:{
      tabHandler(label){
        if(label == 'Task')
        {
          this.updateData();
        }
      },
      updateData(){
        let self = this;

        axios.post('http://localhost:3000/app/templateList', {
          username: this.$store.state.name
        })
          .then(function (response) {
            console.log(response);
            console.log("code:"+response.data.code+"|msg:"+response.data.msg);
            if(response.data.code!='200')
            {
              self.showError(response.data.msg);
            }else {
              self.templateList.splice(0);
              //
              for(let i in response.data.list)
              {
                var list = {};
                list.id = i;
                list.tid = response.data.list[i]._id;
                list.label = response.data.list[i].templateName;
                self.templateList.push(list);
              }
              console.log(self.templateList);
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    computed: {

    },
    components: {
    }
  };

[MarsZone]

OK, I found the reason. Wrong code

<v-ons-list v-for="template of templateList" :key="template.label">
      <v-ons-list-item tappable>
        <div class="title">{{ template.label }}</div>
      </v-ons-list-item>
    </v-ons-list>

Right Code

<v-ons-list>
      <v-ons-list-item v-for="template of templateList" :key="template.label">
        <div class="title">{{ template.label }}</div>
      </v-ons-list-item>
    </v-ons-list>

I need put v-for at tag v-ons-list-item.

It works fine when I use 'v-ons-list'.It wont work if I use 'v-ons-card'.That's it

So the tag 'v-ons-card' cant update the view right?