Vue.js Passing a variable in a loop to another component-CodePudding

As a beginner in Vue.js,I am trying to create a Todo app, but problems seems to passing a variable to another component when looping. i want to pass item to another embedded component. Here what I have with all the components:

in main.js:

import Vue from "vue";
import App from "./App.vue";
import Todo from "./components/Todo";
import itemComponent from "./components/itemComponent";

Vue.config.productionTip = false;
Vue.component('todo', Todo);
Vue.component('itemcomponent', itemComponent);

new Vue({
  render: h => h(App)
}).$mount("#app");

in App.vue:

<template>
  <div id="app">
    <todo></todo>
    <img alt="Vue logo" src="./assets/logo.png" width="25%" />
  <!--  <HelloWorld msg="Hello Vue in CodeSandbox!" /> -->
  </div>
</template>

<script>


export default {
  name: "App",
  components: {
  

  },
};
</script>

in Todo.vue:

<template>
  <div>
    <input type="text" v-model="nameme" />
    <button type="click" @click="assignName">Submit</button>
    <div v-for="(item, index) in result" :key="item.id">
     <itemcomponent {{item}}></itemcomponent>
    </div>
  </div>
</template>


<script>
import { itemcomponent } from "./itemComponent";

export default {
  props:['item'],
  data() {
    return {
      nameme: "",
      upernameme: "",
      result: [],
      components: {
        itemcomponent,
      },
    };
  },
  methods: {
    assignName: function () {
      this.upernameme = this.nameme.toUpperCase();
      this.result.push(this.nameme);
      this.nameme = "";
    },
  },
};
</script>

in itemComponent.vue:

<template>
  <div>
    <input type="text" value={{item }}/>
  </div>
</template>


<script>
export default {
  props: {
    item: String,
  },
  data() {
    return {};
  },
};
</script>

what is my mistake? thanks for help.

CodePudding user response：

You need to pass item as a prop: <itemcomponent :item="item"></itemcomponent>.

https://v3.vuejs.org/guide/component-props.html#passing-static-or-dynamic-props

CodePudding user response：

Quite a bunch of mistakes:

You should import single page components inside their parent components and register them there, not in main.js file. EDIT: Explaination to this is given in docs

Global registration often isn’t ideal. For example, if you’re using a build system like Webpack, globally registering all components means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download.

You have a component registration in Todo.vue, but you have misplaced it inside data so its is just a data object that is not getting used, move into components.
In your loop you have item.id, but your item is just a plain string, it does not have an id property. Either change item to object with id property, or simply use the index provided in loop (not recommended).
Pass your item as a prop, not mustache template. So in Todo.vue replace {{ item }} with :item="item"
In your ItemComponent.vue you have mustache syntax once again in the attribute. Change value={{item }} to :value="item"

So here's the final code:

main.js

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

in App.vue:

<template>
  <div id="app">
    <todo></todo>
    <img alt="Vue logo" src="./assets/logo.png" width="25%" />
  <!--  <HelloWorld msg="Hello Vue in CodeSandbox!" /> -->
  </div>
</template>

<script>
import Todo from './components/Todo.vue';

export default {
  name: "App",
  components: {
    Todo,
  },
};
</script>

in Todo.vue:

<template>
  <div>
    <input type="text" v-model="nameme" />
    <button type="click" @click="assignName">Submit</button>
    <div v-for="(item, index) in result" :key="index">
     <itemcomponent :item="item"></itemcomponent>
    </div>
  </div>
</template>


<script>
import { itemcomponent } from "./itemComponent";

export default {
  props:['item'],
  data() {
    return {
      nameme: "",
      upernameme: "",
      result: [],
    };
  },
  methods: {
    assignName: function () {
      this.upernameme = this.nameme.toUpperCase();
      this.result.push(this.nameme);
      this.nameme = "";
    },
  },
  components: {
    itemComponent,
  }
};
</script>

itemComponent.vue:

<template>
  <div>
    <input type="text" :value="item"/>
  </div>
</template>


<script>
export default {
  props: {
    item: String,
  },
  data() {
    return {};
  },
};
</script>