0 
Vue.component ('app-hous', {
        data: function () {
            return {
       message: 'Hello world, hello',
                houses: [
                    {name: "HILL8"},
                    {name: "HILL12"},                   
                ]
            }
        },
        computed: { 
            showMess () {
                return 'Get presentation ' +  this.hous.name
            },
        },
        template:   `
    <div><div class="houses" v-for="hous in houses">            
            <div class="plan">
               <div>{{ hous.name }} </div>            
               <div>{{ showMess }} </div>                             
            </div>
        </div></div>`
    });

    new Vue({
        el: '#app', 
        data: {
            styleCSS: "",
            value: 1,       
        },      
    });

I need to compute element of object houses. But I run it before v-for="hous in houses", so I can not get showMess. How I can fix it?

https://jsfiddle.net/Nata_Hamster/p43o8d69/

Improve this question
1
  • 1
    In simple words I would say think of a computed property as something that you already have, and you just want to represent it on the Front-end. In your example you don't have the value of this.hous.name in your data. It's just something you are showing in the v-for loop. To solve this you need a to pass a value from the v-for loop into a method jsfiddle.net/oc8eu1r6/10 Commented May 31, 2021 at 12:27

2 Answers 2

Reset to default
1

You shouldn't use a computed variable in this scenario.

Just use a method:

methods: {
    showMess(houseName) {
        return 'Get presentation ' +  houseName;
    }
}

Then in your template:

template: `
    <div><div class="houses" v-for="hous in houses">            
        <div class="plan">
            <div>{{ hous.name }} </div>            
               <div>{{ showMess(hous.name) }} </div>                             
            </div>
        </div>
    </div>
`

Computed properties are meant to apply simple operations on your variables. But, in your case, the hous variable is not directly on data, it's an element of houses from the data.

Here is an example of a computed property that would accomplish the same thing, but I still suggest you to use the method example from above:

computed: {
    messByHouseName() {
        const messByHouseName = {};
        for (const house of this.houses) {
            messByHouseName[house.name] = `Get presentation ${house.name}`;
        }
        return messByHouseName;
    }
}

Then in your template:

template: `
    <div><div class="houses" v-for="hous in houses">            
        <div class="plan">
            <div>{{ hous.name }} </div>            
               <div>{{ messByHouseName[hous.name] }} </div>                             
            </div>
        </div>
    </div>
`
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

The computed property will not automatically loop over your houses. You have two ways to accomplish this. Either you can create a method (described in this answer: https://stackoverflow.com/a/67773527/11011360) or create a computed property with the desired output (Edit: Catalin Hoha shows also a way to achieve this with a computed property but the approach is different):

convertedHouses() {
  const converted = houses.map(hous => {
    return {
      ...hous, // or you could write "name: hous.name" instead
      message: 'Get presentation ' + hous.name
    }
  });
  return converted;
}


And access the computed property like that in your template:

template: `
    <div class="houses" v-for="hous in convertedHouses">            
        <div class="plan">
            <div>{{ hous.name }} </div>            
            <div>{{ hous.message }} </div>        
        </div>
    </div>
`
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.