CODEWITHSUNDEEP
javascripthtmlvue.jsvue-component
ofleaf
ofleaf

Reputation: 615

How can I use if statement with v-for?

I want to render inner matrix in cell matrix by input value. But only render to selected element.

This is my codepen. https://codepen.io/ofleaf/pen/EJgoVp

I think should modify below code.

<div class="inner-layout"
       v-for="val in calInnerLayout"
       :style="{ width: calInnerLayoutWidth + '%', height: calInnerLayoutHeight + '%' }"></div>

How can I use if statement with v-for? I would like to compare the parent element of the current inner element with the active element and then update that inner element if it matches, otherwise keep the existing value.

Upvotes: 0

Views: 72

Answers (2)

Arturo Salgado
Arturo Salgado

Reputation: 81

the answer by @dganenco seems like a better solution, but if you ever need to use a v-if with a v-for in the template this is what you could do.

<div v-for="n in 5" >
  <template v-if="n % 2 === 0"> 
  {{ n }}
  </template>
</div>

Upvotes: 1

dganenco
dganenco

Reputation: 1616

I would advise you to use computed property to achieve your requirement. Small example: 

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  },
	computed: {
		filteredTodos: function(){
			return this.todos.filter(todo => !todo.done)
		}
	}
})
.as-console-wrapper {
  display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in filteredTodos">
      <label>
        <input type="checkbox"
          v-on:change="toggle(todo)"
          v-bind:checked="todo.done">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
</div>

Upvotes: 2

Related Questions