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

I meet a problem when creating vue template.Something like below:

<template>
  <div :prop="Astr + 'prop'"></div> // here is the problem
</template>
<script>
  export default {
    data() {
      return {
        AProp: 10,
        AStr: "A"
      }
    }
  }
</script>

I want to transform the prop of div to AProp, a value from data.But I don't know how to resolve it. Thanks a lot.

It will produce 10

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


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

Components Basics — Vue.js, Instead, a component's data option must be a function, so that each instance can maintain an There are two types of component registration: global and local. A component can have as many props as you'd like and by default, any value can be It should be noted that this limitation does not apply if you are using string� Methods can be used for various things as you will see in the upcoming videos, but for now I want the method to return a string value that can be output through string interpolation. So how can we access the data properties within this method? Vue.js proxies our data and methods to be available in the this context.

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>

Introduction — Vue.js, The easiest way to try out Vue.js is using the Hello World example. Feel free to Or, you can create an index.html file and include Vue with: <! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive. How� In this tutorial, we are going to learn about props in vue.js apps with the help of examples. Props. In Vue.js props helps us to pass the data from parent components to its child components. Registering props. To use the props in Vue components first we need to register the props. Let’s create a new component called Button.

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.

Style Guide — Vue.js, Prop definitions should be as detailed as possible. Even better! props: { status: { type: String, required: true, validator: function� I want to pass this prop as a string: <list-view :avatar="pictures"></list-view> But I think Vue thinks I am trying to call a method because I am getting these warnings: [Vue warn]: Property or method "pictures" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

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`;
  }
}

Methods, Computed, and Watchers in Vue.js, One of the reasons I love working with Vue is because of how useful methods, We'll call this property findName and you can see it referenced both on the to any properties it's tracking, in data , computed , or props , for example. We create a for loop, and turn the current index into a string; Then we can� Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "visible" (found in component ) Try creating a computed property out of the prop received in the child component as

Creating Vue.js Component Instances Programmatically, I have been on a Vue.js project that required the ability to create as instantiation, props passing, slots, mounting, translates to JavaScript So I needed a way to dynamically create component instance for any Note that in our case we just put a simple string in the slot because Right link for the demo � We have already seen methods for Vue instance and for components. Computed properties are like methods but with some difference in comparison to methods, which we will discuss in this chapter. At the end of this chapter, we will be able to make a decision on when to use methods and when to use computed properties.

Using Slots In Vue.js — Smashing Magazine, Slots are a powerful tool for creating reusable components in Vue.js, though Let's take a look at how to use slots and some examples of how they can be Let's pretend that div is there to create a stylistic frame around its content. A prop isn't practical because a button tag is allowed to have all kinds of� Vue.js uses DOM-based templating. The compiler walks through DOM elements and looks for directives and creates data bindings. This means all Vue.js templates are parsable HTML that can be converted into actual DOM elements by the browser. Vue.js converts string templates into DOM fragments so they can be cloned when creating more Vue instances.

A Beginner's Guide to Working With Components in Vue, There are various ways to create components within a Vue Want to learn Vue. js from the ground up? In the child component, owner is the name of the prop with which we Expected Boolean, got String. However, in order to make components that can be composed together in useful ways, we need� I agree with Evan, if you have a mandatory String, you should always provide a value, so the parent must provide at least an empty string. But, for some cases, the parent doesn't actually know the value of the string (for instance it's in the middle of an AJAX request), so I believe the parent should model the value as a NULL or undefined.

Comments
  • You are right.return this[prop] just works.eval here is unnecessary.Thanks
  • Okay, and please mark my answer as a marked xD, Thanks :D
  • Never ever use eval.