Vue components pass json parameter

Question

I can't seem to pass Vue data into Vue component from template , i use Handlebars , and i need pass data from handlebars Don't Show Nothing (Sorry for my English) i put code here https://codesandbox.io/s/fervent-hypatia-hq884?file=/src/App.vue

I try use this solution but i can´t https://jsfiddle.net/Beowulfdgo/4qo1xjad/2/

<template>
<div id="app3">
    <FiltroAudioannotations  parametro="hola"></FiltroAudioannotations>
</div>
</template>

<script>
import FiltroAudioannotations from "./components/FiltroAudioannotations.vue";

export default {
    name: "App3",
    components: {
        FiltroAudioannotations,
    }
};
</script>

this is my component

<template>
<div>Audio annotations
  Aqui
  
    {{otro}}
    <button v-on:click="getTodos()"></button>
    <table>
        <thead>
            <tr>
                <th>Titulo</th>
                <th>Lengua Terminal</th>
                <th>Gpo de Lenguas</th>
                <th>Comunidad</th>
                <th>Hablantes</th>
                <th>Genero y Duración</th>

            </tr>
        </thead>
        <tr>
            <td><input type="text" id="titulo" name="titulo"> </td>
            <td><input type="text" id="lengua" name="lengua"> </td>
            <td><input type="text" id="gpo_lengua" name="gpo_lengua"></td>
            <td><input type="text" id="comunidad" name="comunidad"></td>
            <td><input type="text" id="hablantes" name="hablantes"></td>
            <td><input type="text" id="genero" name="genero"></td>

        </tr>
    </table>
</div>
</template>


<script>
export default {
    name: "FiltroAudioannotations",
      props: {
    parametro: Object,
  },
    data() {
        return {
            json: {},
            result: null,
            otro:"nuevo"

        }
    },
    methods: {
      setJson (payload) {
            this.json = payload
        },
        async getTodos() {
            let response = await this.axios.get("http://localhost:40923/audioannotations/filter")
            if (response) {
                this.response = response.data;
                console.log(response.data)
            }

        }
    }
}
</script>

and this my handlebar file

<div id="app3"  >
    <FiltroAudioannotations  :json="setJson({ foo: 'bar' })" >
      {{json}}
    </FiltroAudioannotations>
</div>

<table>
</table>

Dan · Accepted Answer · 2020-11-16 09:31:30Z

2

You're trying to call the child's setJson method from the parent, which doesn't work. Remove that method and change the child's json data to a prop:

App template:

<div id="app">
  <FiltrosAudioannotations :json="{ foo: 'bar' }"></FiltrosAudioannotations>
</div>

FiltrosAudioannotations instance:

export default {
  name: "FiltroAudioannotations",
  props: {
    food: Object,
    json: Object,
  },
  data() {
    return {
      result: null,
      otro: "nuevo",
    };
  },
};

edited Nov 16, 2020 at 9:31

answered Nov 16, 2020 at 3:24

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jeremykenedy Over a year ago

I was thinking the same thing ;)

Collectives™ on Stack Overflow

Vue components pass json parameter

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related