Home » vue » Vue.js 2 Object variable within div tag

Vue.js 2 Object variable within div tag

Posted by: admin November 26, 2021 Leave a comment

Questions:

In view when you have an array you can use the following to get some object and then use it withing that tag.

<div v-for="f in filters">
    {f.minValue}
</div>
<script>
{
  data: {
    filters:[{minValue: "6"},{minValue: "10"}]
  }
}
</script>

Is there an equivalent for just defining an object? e.g.

<div :SOMETHING="filter.filterBetween as tempObject">
     {tempObject.minValue}
</div>
{
  data: {
    filter:{
        filterBetween:{
          minValue: "6",
          maxValue: "10"
          }
      }
  }
}
</script>

Have had a look around but not able to find anything or I’m using the wrong wording to looks for it.

Thanks in advance

Answers:

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>

###

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>

###

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.