Sudar's Profile

1578
Points

Questions
16

Answers
25

  • Asked on December 11, 2018 in vue.js.

    Build a watcher on $route in element:

    watch:{
        $route (to, from){
            this.show = false;
        }
    }
    

    It notices route modifications and when modified, sets shows false.

    • 573 views
    • 1 answers
    • 0 votes
  • Asked on December 10, 2018 in vue.js.

    The important determination ref property is to generate DOM element can be selected with key in parent $ref property.

    For instance, input component with ref=”input”, represents its DOM node in parent like this.$ref[“input’] otherwise this.refs.input

    Sometimes, you can’t operate DOM directly, so it will be better in some cases. The sample case, valid use case is focused on input: you can utilize this.$refs[“input”].focus() in function of component.

    • 509 views
    • 1 answers
    • 0 votes
  • Asked on November 22, 2018 in No Category.

    Else, you might attempt to make helpers method a plugin.

    The authorized path to generate a plugin is to produce an item including install method.

    import Vue from 'vue'
    import helpers from './helpers'
     
    const plugin = {
        install () {
            Vue.helpers = helpers
            Vue.prototype.$helpers = helpers
        }
    }
     
    Vue.use(plugin)
    

    You can use it anywhere in your elements, with the help of:

    this.$helpers.capitalizeFirstLetter()
    

    or anyplace in your application using:

    Vue.helpers.capitalizeFirstLetter()
    
    • 0 views
    • 13374 answers
    • 0 votes
  • Asked on November 22, 2018 in vue.js.

         Events always goes from child to parent. They don’t move in additional. For instance, event from child to grandparent.

         Vue document clearly gives details in Non Parent-Child Communication unit. It is a wide clue that grandparent element, generated an empty vue element that transferred from grandparent down to children and grandchildren through props. Grandparent snoops for event and grand children produce even on “event bus”.

         Few applications utilize universe event bus in-spite of per-element event bus. Utilizing a universe event bus means you would want to have individual event names or namespace. Then there will be no clash between various elements.

    • 620 views
    • 2 answers
    • 0 votes
  • If you calculate array alike this, vuejs cannot take the modifications to state.

    You must utilize array functions such as push, splice or so on. Never change the indexes like a[2]=2 or not the .length attribute of array.

    new Vue({
      el: '#app',
      data: {
                f: 'DD-MM-YYYY',
        items: [
          "10-03-2017",
          "12-03-2017"
        ]
      },
      methods: {
       
        cha: function(index, item, what, count) {
                 console.log(item + " index > " + index);
          val = moment(this.items[index], this.f).add(count, what).format(this.f);
     
     
                  this.items.$set(index, val)
          console.log("arr length:  " + this.items.length);
        }
      }
    })
    
    ul {
      list-style-type: none;
    }
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
    <div id="app">
      <ul>
        <li v-for="(index, item) in items">
        <br><br>
          <button v-on:click="cha(index, item, 'day', -1)">
          - day</button>
          {{ item }}
          <button v-on:click="cha(index, item, 'day', 1)">
          + day</button>
        <br><br>
        </li>
      </ul>
    </div>
    
    • 694 views
    • 2 answers
    • 0 votes
  • Asked on November 22, 2018 in vue.js.

    No need of function:

    // html element
    <div id="mobile-toggle"
     v-bind:class="{ active: showMobileMenu }"
     v-on:click="showMobileMenu = !showMobileMenu">
    </div>
     
    //in your vue.js app
    data: {
        showMobileMenu: false
    }
    
    • 531 views
    • 2 answers
    • 0 votes
  • Asked on November 22, 2018 in vue.js.

    Problem might be here:

    <template id="newtemp" :name ="{{user.name}}">
    

    If you use prefix prop with help of : it represents to vue as variable, not a character. Don’t use {{}} along user.name. Give it a try:

    <template id="newtemp" :name ="user.name">
    

    The concept in top content is true, but problem is if you modify URL and going to new route, the original element vanishes. If you want to have second element change parent information, second element needs to be child element of 1st and be a part of same element.

    • 380 views
    • 2 answers
    • 0 votes
  • Asked on November 22, 2018 in No Category.

    Using ES6 template literal, it can be used as:

    <a :href="`/job/${r.id}`"
    
    • 0 views
    • 13374 answers
    • 0 votes
  • Asked on November 22, 2018 in vue.js.

    This solution is executed with the help of NPM package:

    <input @input="debounceInput">
     
    methods: {
        debounceInput: debounce(function (e) {
          this.$store.dispatch('updateInput', e.target.value)
        }, config.debouncers.default)
    }
    

    With the help of lodash, it is executed as follows:

    <input v-on:input="debounceInput">
     
    methods: {
      debounceInput: _.debounce(function (e) {
        this.filterKey = e.target.value;
      }, 500)
    }
    
    • 487 views
    • 2 answers
    • 0 votes
  • Asked on November 22, 2018 in vue.js.

        In vuejs 2 v-el:el:uniquename has been substituted by ref=”uniqueName”. The component is retrieved through this.$refs.uniqueName.

    • 358 views
    • 2 answers
    • 0 votes