@MaksZhukov
programer

Как динамически менять свойства компонента в vue за его пределами?

Дан код который меняет props компонента динамически, но вот он меняет их через свойства el #app.
<div id="app">
        <input type="text" v-model="width">
        <br>
        <br>
        <input type="text" v-model="height">
        <br>
        <br>
        <br>
        <br>
        <br>
        <test :width="width" :height="height"></test>
    </div>
    <script>
    Vue.component('test', {
        template: '<div><input :value="width" type="text"><br><br><input :value="height" type="text"></div>',
        props: ['width', 'height']
    })
    new Vue({
        el: '#app',
        data: {
            width: 0,
            height: 0
        }
    });
    </script>

Можно ли менять свойства компонента и без свойст в el #app? Как например вот так как-нубудь:
<div id="app">
        <input type="text" v-model="width(чтобы бралось с компонента как-нибудь)">
        <br>
        <br>
        <input type="text" v-model="height(чтобы бралось с компонента как-нибудь)">
        <br>
        <br>
        <br>
        <br>
        <br>
        <test></test>
    </div>
    <script>
    Vue.component('test', {
        template: '<div><input :value="width" type="text"><br><br><input :value="height" type="text"></div>',
            data: function(){
       return{
         width:0,
         height:0
         } 
       }
    })
    new Vue({
        el: '#app'
    });
    </script>
  • Вопрос задан
  • 926 просмотров
Решения вопроса 1
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
В компоненте test добавьте секцию data и в ней пропишите эти свойства.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы