[Vuejs]-Vue.js 2 Object variable within div tag

by

2👍

✅

Unfortunately, there is not.

There is a workaround using v-for, but it is somewhat dirty:

<div v-for="tempObject in [filter.filterBetween]">
     {{ tempObject.minValue }}
</div>
<script>
{
  data: {
    filter:{
        filterBetween:{
          minValue: "6",
          maxValue: "10"
          }
      }
  }
}
</script>

See it in action:

new Vue({
  el: '#app',
  data: {
    filter: {
      filterBetween: {
        minValue: "6",
        maxValue: "10"
      }
    }
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-for="tempObject in [filter.filterBetween]">
    {{ tempObject.minValue }}
  </div>
</div>
👤acdcjunior

1👍

Maybe use a computed property:

new Vue({
  el: '#app',
  data: {
    filter: {
      filterBetween: {
        minValue: "6",
        maxValue: "10"
      }
    }
  },
  computed: {
    tempObject () { return this.filter.filterBetween }
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div>
    {{ tempObject.minValue }}
  </div>
</div>
👤Psidom

0👍

I’m not sure I fully understand your question, but it seems to me that you simply want to bind to the minValue and maxValue of your filter. If this is the case, you really don’t need an array (unless you have a number of filters), and you don’t really need to alias your tempObject.

May I suggest this approach. Define your filter as an object and use the same binding you tried on the iteration of the array, but instead use it on the valueFilter property of your Vue instance.

<script>
export default {
  name: 'some-component',
  data() {
    return {
       valueFilter: {
           minValue: 6,
           maxValue: 10
        }
    };
  }
});
</script>
<template>
    <div id="some-component">
      <div>
        from: {{ valueFilter.minValue }} to: {{ valueFilter.maxValue }}
      </div>
    </div>
</template>

You don’t need to iterate through an array to do a binding of a property defined in data. And you don’t need a computed property as it seems that the value you want to display seems to be constant.

If the object you are binding to will be changing often, or if it requires computation of some sort, then yes, a computed property would be appropriate but i think that’s not what you are really trying to achieve.

👤Daniel Ormeño

Leave a comment