Question 160413 in Javascript Question posted in
A very good W3school tutorial can be found here.

How do I assign values to Javascript properties?

I would like to know how can i assign values to the properties foo and greetingMessage please

App.vue:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <span>greetingMessage:{{ greetingMessage }}</span>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { onBeforeMount,onMounted,onUpdated,onBeforeUpdate,onActivated,onDeactivated,onBeforeUnmount,onUnmounted } from 'vue'

export default {
  name: 'App',
  props: ['foo','greetingMessage'],
  components: {
    HelloWorld
  },
  setup(props) {
    console.log("props:",props)
    console.log("props.foo:",props.foo)
    console.log("props.greetingMessage:",props.greetingMessage)
    return {
      props
    }
  }
}
</script>
Tags:

2

Answers


  1. 0

    Currently you have props defined on your App component. Root App component isn’t meant to have props. Or if you’re trying to use variables in your Root App component, you’ll have to define component data and use variables from data section, not from props. Props are values you pass from a main component to another one that you’ll be using in the main component. So for example if you try to replace HelloWorld component props you’ll do it like this.

    <HelloWorld msg="Welcome to Your Vue.js App"/>

    Since currently you’re trying to assing "Welcome to Your Vue.js App" to ‘msg’ prop. To assign values to ‘foo’ and ‘greetingMessage’ you’ll have to do it like:

    <HelloWorld foo="bar" greetingMessage="Welcome to Your Vue.js App"/>

    That’s how you do it statically. To pass variables to props and make it dynamic, you’ll have to do it like this:

    <HelloWorld :foo="foo" :greetingMessage="greetingMessage"/>

    Keeping in mind that you will have to define those variables in your Vue class in data section.

    More info on data: https://vuejs.org/guide/essentials/component-basics.html

    More info on props: https://vuejs.org/guide/components/props.html#prop-passing-details

    Login or Signup to reply.
  2. 0

    It’s not cleat what you want to do. If the component has props then it is expected to be a child component.

    Property values must be passed from the parent component. See a example below:

    Child.vue

    <script setup>
const props = defineProps(['msg'])

console.log(props.msg)
</script>

<template>
  <p>
    Greeting msg: {{ msg }}
  </p>
</template>

    Parent.vue

    <script setup>
import Child from './Child.vue'
</script>

<template>
    <h1>Component Prop Demo</h1>
    <Child msg="I am a component Prop" />
</template>

    UPDATED

    Pass props using v-bind, Parent.vue:

    <script setup>
import { ref } from "vue";
import Child from './Child.vue'

const props = ref({
    msg: "I am a component Prop",
});


</script>

<template>
    <h1>Component Prop Demo</h1>
    <Child v-bind="props" />
</template>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search