Vue.js

Event for entire view has been re-rendered

var vPlan = new Vue({
    el: '#v-plan',
    data: {
        plans: <?php echo $this->plansToJson() ?>,
        plan: <?php echo $this->planToJson() ?>,
        providerType: {code: '', items: <?php echo $this->providerTypeToJson() ?>},
        providerGroup: {code: '', items: <?php echo $this->providerGroupToJson() ?>},
    },
    updated: function () {
        this.$nextTick(function () { // Entire view has been re-rendered.
            if ($('member-plan')) decorateTable('member-plan');
        })
    },
    methods: {
        planO...

Edit

Delete Item

function onDeleteItem(id) {
    list.value = list.value.filter(item => item.id !== id);
}

sunilsandhu.com

Edit

Dynamic binding of property with Vue.compile Or late binding of v-model

Ref issue in github Add late binding feature?, I also needed a feature where I can bind to v-model after the vm class had mounted. The issue mentioned that it can be achieved with Vue.compile. I tried the approach in this stackoverflow, but I kept receiving error _[Vue warn]: Property or method "payment" is not defined on the instance but referenced during render. Make sure that this property i...

Edit

TypeError: "this.$copyText is not a function"

I kept getting the error TypeError: "this.$copyText is not a function" when trying to use vue-clipboard2 in a standalone webpage. I finally got it to work:

<head>
.
.
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-clipboard2@0.3.1/dist/vue-clipboard.js"></script>
</head>
<body>
.
.
  <div id="vMessage" class="text-field">
    <textarea v-model="message" placeholder="Write some message"></textarea>
  </div>
  <script>
    var vmMe...

github.com

Edit