Двухстороннее связывание в шаблон

Question

Я искал часы уже и не могу понять ... Есть ли способ связать данные из входных данных, отправить их в шаблон и использовать эти данные?

Позвольте мне нарисовать картинку ...

edit.php

<form>
  <input v-model="?">
</form>

<prod-preview name="somehowsendthename"></prod-preview>

prod-preview.vue

<template>
    <h1>{{ name }}</h1>
</template>
<script>
export default {
    name: "product-preview",
    props: ["name"],
    data(){
        return {
            name: ""
        }
    },
}

Не беспокойтесь о привязке реального компонента, который работает.Спасибо

Answer 1

Чтобы передать имя из блейда и связать его с данными в компоненте представления, вам нужен реквизит с другим именем, например, initialName, а затем задайте имя данных, которое вы связываете с v-моделью, используяinitialName, как это ...

export default {
  name: "product-preview",
  props: ["initialName"],
  data(){
      return {
          name: this.initialName
      }
  },
}

Обратите внимание, что атрибуты html не чувствительны к регистру, поэтому вы должны передать это следующим образом, и оно будет получено правильной командой:

<prod-preview initial-name="{{ $name }}"></prod-preview>

Теперь вы можете v-bind связать с «name», и оно будет поддерживать текущее имя атрибута данных при изменении этого ввода, и вы не будете пытаться изменить реквизит, что не должно быть сделано.

Answer 2

Примерно так должно работать:

// edit.vue
<template>
    <form>
      <input v-model="name">
    </form>
    <prod-preview :name="name"></prod-preview>
</template>
<script>
import ProdPreview from './prod-preview'
export default {
    name: "edit",
    components: [ProdPreview],
    data(){
        return {
            name: ""
        }
    },
}
</script>

// prod-preview.vue
<template>
    <h1>{{ name }}</h1>
</template>
<script>
export default {
    name: "product-preview",
    props: ["name"]
}
</script>