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

Javascript – How to send variable from Parent to Child component when I use "click" at Vue.js?

I have two components, TimeLine.vue(Parent) and SuspendedMemo.vue(Child)

TimeLine.vue(Parent)

computed: {
    optionsData () {
        groupTemplate: (item, element, data) => {
          if (!item) return
          var container = document.createElement('div')
          if (item.isDisable !== true) container.setAttribute('class', 'enable')
          var i = document.createElement('i')
          // click
          i.addEventListener('click', () => {
            // itemのidを取得してSuspendedMemoに渡す
            var itemId = item.id
            const url = `/shop/${this.selectedShopId}/room/${itemId}/suspend_memo`
            console.log('Timeline of URL’, url)
            this.data = item.suspendedReserveMemo
            this.openMemo()
          })
          i.setAttribute('class', 'v-icon notranslate mr-2 mdi mdi-close-circle theme--light pink--text')
          container.appendChild(i)
          var span = document.createElement('span')
          span.innerHTML = item.content
          container.appendChild(span)
          return container
        }
      }
      return _.merge({}, base, this.options)
    }
  },

When I click ↑, how to send variable ‘url’ to SuspendedMemo.vue(Child) component?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    this.itemId = item.id

    This is solution

    <SuspendedMemo :itemId="this.itemId" ></SuspendedMemo>

  2. 0

    you can use "emit event".

    there is a demo.

    parent:

    <template>
  <div>
    <child-component :name="name" />
    <button @click="changeName">Change name</button>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "Parent",
  data() {
    return {
      name: "John Doe",
    };
  },
  methods: {
    changeName() {
      this.$emit("name-changed", "Jane Doe");
    },
  },
};
</script>

    child:

    <script>
import { defineComponent } from "vue";

export default defineComponent({
  props: {},
  emits: ["name-changed"],
  methods: {
    handleNameChanged(name) {
      console.log("Name changed to", name);
    },
  },
});
</script>

<template>
  <div>
    <h1>My name is {{ name }}</h1>
  </div>
</template>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search