[Vuejs]-Is there a method to make a prop consisted of two linked string in Vue.js?

by

2👍

✅

It will produce 10

<div :prop="getValue()"></div>


methods: {
  getValue() {
    return this[`${this.AStr}Prop`]
  }
}
👤LuckyTuvshee

1👍

Add a method to return the value that you want to use for prop:

<template>
  <div :prop="getProp(AStr)"></div>
</template>

<script>
export default {
  data() {
    return {
      AProp: 10,
      AStr: "A"
    };
  },
  methods: {
    getProp(str) {
      return str + "prop";
    }
  }
};
</script>
👤gabranches

1👍

the way you are doing is correct, you just have a typo for AStr. Alternatively, you can have a method to return the computed value.

👤developer

0👍

There is error in your code. Div prop Astr is not the same as data property AStr.
But if you want to watch AStr changes better to use computed property.

<div :prop="getProp"></div>


computed: {
  getProp() {
    return `${this.Astr}prop`;
  }
}
👤Женя Юхновец

Leave a comment