Vue.js 2 Object variable within div tag

Question

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

The answers below work, but they are just a workaround. I think this approach is a hack for what you really want to achieve. It seems to me that you simply want to display the min and max values to filter by, you don't need an array for this. What exactly is the expected result you want? — Daniel Ormeño
– Daniel Ormeño, Commented Apr 20, 2018 at 15:22
@DanielOrmeño I needed to put a simple example here so as not to confuse people giving the answers. In my case I have 30 - 40 filters in an array and the object is getting to deep when trying to write view parts for it. The underlying filters in the array looks like filter object just didn't want to add complexity to question. If I had time the alternative would likely be to use templates. — SatanEnglish
– SatanEnglish, Commented May 21, 2018 at 22:22
Regardless, in my opinion, the accepted answers are workarounds and bad practice. If the number of items in your array is large, you should use validation, and if the inner object is complex, it should be a component. So no need for computed or iterating through the Object itself. Good luck! — Daniel Ormeño
– Daniel Ormeño, Commented May 21, 2018 at 23:41

acdcjunior · Accepted Answer · 2018-04-20 01:20:33Z

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>

answered Apr 20, 2018 at 1:20

acdcjunior

136k37 gold badges340 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

SatanEnglish Over a year ago

Nice answer but this would confuse anyone going in into thinking its an array.

acdcjunior Over a year ago

Humm.. Yes, I'd say it is dirty overall. But isn't [filter.filterBetween] sort of clearly a unitary array?

SatanEnglish Over a year ago

Yer I think this is likely gonna work better for my case where the filters are inside an array there selves.

SatanEnglish Over a year ago

Works like a charm. If no-one gives a better answer in the next couple of days I'll accept this. Thanks

acdcjunior Over a year ago

Okay. For future reference, here's the issue where the addition of something like a v-local to Vue: github.com/vuejs/vue/issues/6913 if they implement it, we will know by following this issue.

akuiper · Accepted Answer · 2018-04-20 01:29:10Z

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>

edited Apr 20, 2018 at 1:29

answered Apr 20, 2018 at 1:23

akuiper

216k33 gold badges362 silver badges379 bronze badges

3 Comments

SatanEnglish Over a year ago

This is a nice answer. I'll have a go there is more complexity to my object than this as my filter is itself in an array so not sure how I'd do a computed value for it.

Daniel Ormeño Over a year ago

Why use a computed property for this? will the value of filterBetween change?

SatanEnglish Over a year ago

The object won't but the values will as a user updates them

Daniel Ormeño · Accepted Answer · 2018-04-20 15:44:57Z

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.

answered Apr 20, 2018 at 15:44

Daniel Ormeño

2,7882 gold badges27 silver badges30 bronze badges

1 Comment

SatanEnglish Over a year ago

Is there an equivalent for just defining and object. Was my question maybe I should of put it in bold to help clarify

Collectives™ on Stack Overflow

Vue.js 2 Object variable within div tag

3 Answers 3

5 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related