Vue: [feature] need `v-init`which is similar to anuglar's `ng-init`

[yangjunjun]

Sometimes I want set a new property in 'v-for' loop for each item, but I find it hard.

<div v-for="item in items">
<!-- set a new property for each item -->
</div>

in Angular, by use ng-init, I can easily do it as below:

<div v-for="item in items">
  <p ng-init="item.show=false" >lorem </p>
</div>

so I wish vue will have a v-initwhich is similar to anuglar's ng-init.

scenario:

1. vue: http://jsbin.com/deyotu/edit?html,js,output
2. angular: http://jsbin.com/finayi/edit?html,js,output

[smolinari]

I am not sure (as I am new to all this), but according to Vue's concept of reactivity, any data should be initialized up front.

If you add "show" to all your items under data, it works.

new Vue({
  el: '#test',
  data: {
    items: [{
      name: 'a',
      show: false
    }, {
      name: 'b',
      show: false
    }, {
      name: 'c',
      show: false
    }]
  },
  methods: {
    toggle: function(item) {
      item.show = !item.show;
    }
  }
});

Scott

[jonagoldman]

I agree with @smolinari, not completely sure how Vue will handle this internally, but having 2+ years experience with AngularJs I can tell you that I always avoid using ng-init for a lot of reasons, but it just makes no sense to create data inside the html.

[LeslieYQ]

I agree with @smolinari too. you can init this data in created function.

created () {
    this.data.items.forEach(function(el,index){
        el.show = false;
    })
}

All datas should be created, eidtor by developer, not Vue.

[yangjunjun]

thanks all, actually I have solved this problem by additional init function as @LeslieYQ commented. but I still think it's better have a 'v-init' directive, and leave the option to the user. After there are already vm.$set andVue.set here.

[yyx990803]

The point is that people have found it's a bad practice to randomly add additional data in templates. In general, templates should be treated like a pure function - there should be no side effects except in event handlers. Having a component's state initialized in a single place (in the data function) also makes it easier to read and understand the code later.

@LeslieYQ's solution only adds a non-reactive property because when created is called, the data observation is already done.

If you can, always declare properties directly in data.

[kasparsklavins]

It would be useful in forms, especially since v-model doesn't support initial values.

[smolinari]

Are you sure.? I think it does. However, to be sure, can you better explain what you mean by "doesn't support initial values"?

Scott

[kasparsklavins]

I'm referring to the first notice (the red thing) in the documentation. https://vuejs.org/v2/guide/forms.html

It refers to value attribute on inputs, does it not?

[smolinari]

All that warning is saying is, if you don't have your data initialized _up front,_ v-model won't know what to show in your form's input fields. In other words, if you do have your data initialized with a default value or you assign a value to a property within the data option, before the form is rendered, then v-model will also show that initial value in your form fields.

Scott

[DhruvAerosol]

Hello,
but what if we want to do such?
what are the other option to achieve it?
i have one sample and i am not getting how can i bind DOM with function call in v-for.

<div v-if="checkIfDeleted() === true">
  <div class="card">
    <div class="card-content">
      <i class="material-icons">error</i> Oops! data not found!
    </div>
  </div>
</div>

------

checkIfDeleted () {
    axios.get('http://sdf....').then((res) => {
        return res.status
    })
}

[karpovsystems]

You can create a custom directive

<div v-for="item in items" v-extend="item"></div>

directives: {
    extend: {
        bind (el, binding, vnode) {
            vnode.context.$set(binding.value, 'show', false);
        }
    }
}

[arrowd]

What about using v-init for aliasing long expressions?

In my AngularJS app I had ng-init="w = state.widgets[i].data" just to be able to use w instead of that lengthy expression.

For Vue I found this solution, and while it is mostly satisfactory I find it strange that it isn't available out of the box.

[posva]

You can achieve this with https://github.com/posva/vue-local-scope
See https://github.com/vuejs/rfcs/issues/73 for more info on the topic
This is issue is quite old and out of date now so I'm going to lock it