Vue.js Изменение реквизита

Ссылка на код в скрипке

Так или иначе, вы должны выбрать одно место для проживания государства, а не два. Я не знаю, более уместно иметь его только в Alert или просто в родительском для вашего варианта использования, но вы должны выбрать один.

Как решить, где живет государство

Зависит ли родительский или какой-либо родственный компонент от состояния?

• Да: тогда он должен быть в родительском (или в каком-либо внешнем управлении состоянием)
• Нет: Тогда проще иметь в состоянии самого компонента
• Вроде оба: см. Ниже

В некоторых редких случаях вам может понадобиться комбинация. Возможно, вы хотите дать возможность родителю и ребенку скрывать ребенка. Тогда у вас должно быть состояние как в родительском, так и в дочернем (поэтому вам не нужно редактировать дочерние реквизиты внутри дочернего элемента).

Например, дочерний элемент может быть видимым, если: visible && state_visible, где visible исходит из реквизита и отражает значение в родительском состоянии, а state_visible - из дочернего состояния.

Я не уверен, что вам нужно именно такое поведение, но вот фрагмент. Я бы предположил, что вы действительно хотите просто вызвать toggleAlert родительского компонента, когда вы щелкаете по дочернему.

var Alert = Vue.component('alert', {
  template: `
        <div class="alert" v-if="visible && state_visible">
        Alert<br> 
        <span v-on:click="close">Close me</span>
      </div>`,
  props: {
    visible: {
      required: true,
      type: Boolean,
      default: false
    }
  },
  data: function() {
    return {
      state_visible: true
    };
  },
  methods: {
    close() {
      console.log('Clock this');
      this.state_visible = false;
    }
  }
});

var demo = new Vue({
  el: '#demo',
  components: {
    'alert': Alert
  },
  data: {
    hasAlerts: false
  },
  methods: {
    toggleAlert() {
      this.hasAlerts = !this.hasAlerts
    }
  }
})

.alert {
  background-color: #ff0000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo" v-cloak>
  <alert :visible="hasAlerts"></alert>

  <span v-on:click="toggleAlert">Toggle alerts</span>
</div>

Если свойство полезно только для этого дочернего компонента, дайте дочернему элементу prop, как initialVisible, и data, как mutableVisible, а в ловушке created (которая вызывается при сборке структуры данных компонента), просто this.mutableVisible = this.initialVisible.

Если свойство используется другими дочерними элементами родительского компонента, вам необходимо сделать его data родительским, чтобы сделать его доступным для всех дочерних компонентов. Затем в дочернем this.$emit('visibleChanged', currentVisible), чтобы уведомить родителя об изменении visible. В родительском шаблоне используйте <ThatChild ... :visibleChanged="setVisible" ...>. Взгляните на руководство: http://vuejs.org/v2/guide/components.html

Согласно компоненту Vue.js:

Когда родительское свойство обновляется, оно переходит к дочернему, но не наоборот. Итак, как мы сообщаем родителям, когда что-то происходит? Здесь на помощь приходит настраиваемая система событий Vue.

Используйте $emit('my-event) из дочернего элемента, чтобы отправить событие родителю. Получите событие в дочернем объявлении внутри родительского с помощью v-on:my-event (или @my-event).

Рабочий пример:

// child

Vue.component('child', {
  template: '<div><p>Child</p> <button @click="hide">Hide</button></div>',
  methods: {
    hide () {
      this.$emit('child-hide-event')
    }
  },
})

// parent

new Vue({
  el: '#app',
  data: {
    childVisible: true
  },
  methods: {
    childHide () {
      this.childVisible = false
    },
    childShow () {
      this.childVisible = true
    }
  }
})

.box {
  border: solid 1px grey;
  padding: 16px;
}

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="app" class="box">
  <p>Parent | childVisible: {{ childVisible }}</p>
  <button @click="childHide">Hide</button>
  <button @click="childShow">Show</button>
  <p> </p>
  <child @child-hide-event="childHide" v-if="childVisible" class="box"></child>
</div>

После прочтения ваших последних комментариев кажется, что вы обеспокоены наличием логики для отображения / скрытия предупреждений для родительского элемента. Поэтому я бы предложил следующее:

родитель

# template
<alert :alert-visible="alertVisible"></alert>

# script
data () {
  alertVisible: false,
  ...
},
...

Затем в дочернем предупреждении вы должны $ смотреть значение опоры и переместить всю логику в предупреждение:

ребенок (предупреждение)

# script
data: {
  visible: false,
  ...
},
methods: {
  hide () {
    this.visible = false
  },
  show () {
    this.visible = true
  },
  ...
},
props: [
  'alertVisible',
],
watch: {
  alertVisible () {
    if (this.alertVisible && !this.visible) this.show()
    else if (!this.alertVisible && this.visible) this.hide()
  },
  ...
},
...

Чтобы помочь кому-нибудь, я столкнулся с той же проблемой. Я просто изменил свою переменную, которая находилась внутри v-model = "", с массива props на data. Помните разницу между реквизитом и данными, в моем случае это не было проблемой, изменить его, вы должны взвесить свое решение.

E.g.:

<v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">

До:

export default {
    data: function () {
        return {
            any-vars: false
        }
    },
    props: {
            dialog: false,
            notifications: false,
            sound: false,
            widgets: false
        },
    methods: {
        open: function () {
            var vm = this;

            vm.dialog = true;
        }
    }
}

После:

export default {
    data: function () {
        return {
            dialog: false
        }
    },
    props: {
            notifications: false,
            sound: false,
            widgets: false
        },
    methods: {
        open: function () {
            var vm = this;

            vm.dialog = true;
        }
    }
}

Возможно, это похоже на взлом и нарушает концепцию единого источника данных, но его работа) Это решение создает локальную прокси-переменную и наследует данные от props. Далее работаем с прокси-переменной.

Vue.component("vote", {
    data: function() {
        return {
            like_: this.like,
            dislike_: this.dislike,
        }
    },

    props: {
        like: {
            type: [String, Number],
            default: 0
        },
        dislike: {
            type: [String, Number],
            default: 0
        },
        item: {
            type: Object
        }
    },

    template: '<div class="tm-voteing"><span class="tm-vote tm-vote-like" @click="onVote(item, \'like\')"><span class="fa tm-icon"></span><span class="tm-vote-count">{{like_}}</span></span><span class="tm-vote tm-vote-dislike" @click="onVote(item, \'dislike\')"><span class="fa tm-icon"></span><span class="tm-vote-count">{{dislike_}}</span></span></div>',

    methods: {
        onVote: function(data, action) {
            var $this = this;
            // instead of jquery ajax can be axios or vue-resource
            $.ajax({
                method: "POST",
                url: "/api/vote/vote",
                data: {id: data.id, action: action},
                success: function(response) {
                    if(response.status === "insert") {
                        $this[action + "_"] = Number($this[action + "_"]) + 1;
                    } else {
                        $this[action + "_"] = Number($this[action + "_"]) - 1;
                    }
                },
                error: function(response) {
                    console.error(response);
                }
            });
        }
    }
});

использовать компонент и передать реквизиты

<vote :like="item.vote_like" :dislike="item.vote_dislike" :item="item"></vote>

Интересно, почему другие пропускают его, когда в предупреждении есть подсказка

Старайтесь не изменять свойство напрямую, так как значение будет перезаписано при повторном рендеринге родительского компонента. Вместо этого используйте данные или вычисленное свойство на основе значения свойства. Изменяемая опора: видимая (находится в компоненте)

Попробуйте создать вычисляемое свойство из свойства, полученного в дочернем компоненте как

computed: {
  isVisible => this.visible
}

И используйте это вычисленное в вашем дочернем компоненте, а также для передачи изменений вашему родительскому компоненту.