Related questions

Sending data using props in vue

2018-07-11 03:47 Kyl San Antonio imported from Stackoverflow

Checked most of the questions in and out of stackoverflow about the props in vue however, I'm still struggling on how to apply it on what I'm working.

I have a global component that fetch all the menus. Once fetched, it will construct or build the list (menus):

Vue.component('sidenav', require('./components/Sidenav.vue'));

Already did:
- Add prop: [menus] in customer/index.vue
- Set prop to true in router (customer)
- Bind the menu in Sidenav.vue : <input type="hidden" :menus="menus">

Need to achieve:
I want to send the data ("menus") to customer/index.vue using props instead of calling an API.


See also questions close to this topic

  • Stopping a v-icon in header slot in v-data-table from spinning

    CodePen

    In the CodePen sample I added a second v-icon to the header template. If you sort the column, you can see that both icons spin, when I want the second one to not spin. How can I mark it so it doesn't spin?

  • Is it expected that the extension Vetur for VS Code doesn’t auto-complete in HTML files?

    I only started learning Vue.js 2 and I use VS Code with Vetur for that.

    However, I noticed that Vetur's auto-completion only works in .Vue files but not html or vue-html formats.

    As example, in a file like this: (xxx.html)

    <!DOCTYPE html>
<html>

<head>
  <title> Vue.JS Tutorial </title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script src="App.js" defer></script>
</head>

<body>
  <div id="vue-app">
    <h1> My Profile </h1>
    <button @click="add(10)">Add 10 years</button>
    <button @click="subtract(20)">Subtract 10 years</button>
    <p>My age is: {{age}}</p> 
    <div id="canvas" @mousemove="updateXY">
      <p>{{x}}, {{y}}</p>
    </div>
  </div>


</body>

</html>

    That is linked to this file (.JS):

    new Vue({
  el: "#vue-app",
  data: {
    age: 25,
    x: 0,
    y: 0
  },
  methods: {
    add: function(addnum) {
      this.age += addnum;
    },
    subtract: function(minusnum) {
      this.age -= minusnum;
    },
    updateXY: function(event) {
      this.x = event.offsetX;
      this.y = event.offsetY;
    }
  }
});

    The completion doesn't work at all. When I write something like v- as an attribute, nothing shows to me and I have to write it myself.

    Even in the .JS file (which is supposed to be a Vue file) nothing related to Vue works except the syntax highlighting.

    Is that normal or a problem I have to fix? If it's a problem, what is the fix?

  • Initializing checkboxes in vue-bootstrap b-table rows

    I am working on a page using vue-bootstrap that has a b-form-checkbox-group embedded in each row. Those are appearing fine. The problem comes when I try to assign values to the checked prop. When i assign a static number the boxes will be checked like they should be when the page loads but when I try to set it up to receive responses from jquery get calls the boxes are only sometimes filled with no pattern as far as I can see.

    <nit-card :title="host">
        <b-table
            :items="interfaceNames"
            :fields="switch_interface_config_col_names">
            <template slot="tagged" slot-scope="row">
                <b-form-checkbox-group  :options="vlans"
                                        :checked="interfaceNames[row.index].taggedVlans"
                                        stacked>
                </b-form-checkbox-group>
            </template>
            <template slot="untagged" slot-scope="row">
                <b-form-radio-group :options="vlans"
                                    :checked="interfaceNames[row.index].untaggedVlans"
                                    stacked>
                </b-form-radio-group>
            </template>
        </b-table>
</nit-card>

    Above is the html for the table. nit-card is a vue.component that looks like this.

    Vue.component('nit-card', {
   props: ['title'],
   template:   `
                 <div class="card">
                     <div class="card-header">
                         <h2 class="card-title">{{ title }}</h2>
                     </div>
                     <div class="card-body">
                         <slot></slot>
                     </div>
                 </div>
             `
})

    And some of the js code with an exmaple of ine of the methods that are called to get the data for the checked prop.

    let generic_name = new Vue({
   el: '#generic_name',
   data: function(){
       return{
           interfaceNames: [],
           vlans: [],
           switch_interface_config_col_names: [
               {key: "interfaceName", sortable: true},
               {key: "description", sortable: false},
               {key: "tagged", sortable: false},
               {key: "untagged", sortable: false},
           ],
           submit_params: [
              ["Switch", "text", "Hostname or IP", true],
              ["Interface", "text", "Interface Name", true],
          ],
          host: "",    
      }


  },
methods: {
    getTagged: function(){
         let that = this
         for(let i = 0; i < that.interfaceNames.length; i++){
             let url_encoding_re = /\//g;
             let interfaceName = that.interfaceNames[i].interfaceName.replace(url_encoding_re, '%5c')
             $.get(api_url + "/switches/" + that.host + "/interfaces/" + interfaceName + "/vlans/tagged", function(response) {
                 console.log(response)
                 that.interfaceNames[i].taggedVlans = response.vlans
                 })
             }
     },
}

    The way that I imagine it flowing is that the interfaceNames array stores the data and then it is accessed by the html using the row.index value. What is actually happening is that maybe half of the checkbox forms have the checked values in their checked prop even though when I look at the root vue the values are present in interfaceNames[x].taggedVlans.

    What do i need to do to have the checked prop filled consistently for these check-box-groups?

  • How to insert the Echarts in the Vuejs?

    I want to add the echarts in the template having folder structure

    ecomponents---->BarCharts.js
Vue-Echarts.vue

    The code have written in the BarCharts.js file is :-

    import { IEcharts } from 'vue-echarts-v3/src/full.js';

const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [
   {
      label: 'GitHub Commits',
      backgroundColor: '#f87979',
      borderColor: '#f87979',
      fill: false,
      data: [40, 20, 60, 80, 65, 89, 40]
   },
   {
     label: 'New Commits',
     backgroundColor: 'green',
     borderColor: 'green',
     fill: false,
     data: [20, 30, 45, 60, 25, 66, 69]
  }
]
}

const options = {

}

export default {
extends: IEcharts,
mounted() {
   // Overwriting base render method with actual data.
   this.renderChart(data, options)
}
}

    And code in VueEchart.vue is:-

      <template>
    <v-container fluid grid-list-md>
      <v-layout row wrap>
        <v-flex xs12 lg6 md12 sm12>
          <app-card-block heading="Bar Chart">
           <IEcharts :height="250"></IEcharts>
          </app-card-block>
        </v-flex>
     </v-layout>
    </v-container>   
  </template>

 <script>
 import BarChart from "./ecomponents/BarChart";


export default {
 components: {
  BarChart
 }
}

    This will shows me this error:-

    [WDS] Errors while compiling. Reload prevented. errors @ client:155 onmessage @ socket.js:41 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:883 SockJS._transportMessage @ sockjs.js:881 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2957 client:161 ./node_modules/vue-echarts-v3/src/full.js Module not found: Error: Can't resolve 'echarts' in 'D:\vue\speedvue\node_modules\vue-echarts-v3\src' errors @ client:161 onmessage @ socket.js:41 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:883 SockJS._transportMessage @ sockjs.js:881 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2957 vue-router.esm.js:17 [vue-router] Failed to resolve async component default:Error: Cannot find module 'echarts' warn @ vue-router.esm.js:17 (anonymous) @ vue-router.esm.js:1764 (anonymous) @ vue-router.esm.js:1834 vue-router.esm.js:17 [vue-router] uncaught error during route navigation: warn @ vue-router.esm.js:17 abort @ vue-router.esm.js:1905 (anonymous) @ vue-router.esm.js:1948 (anonymous) @ vue-router.esm.js:1769 (anonymous) @ vue-router.esm.js:1834 vue-router.esm.js:1906 Error: Cannot find module 'echarts' at webpackMissingModule (full.js:2) at eval (full.js:2) at Module../node_modules/vue-echarts-v3/src/full.js(21.fb0a995c.chunk.js:178) at webpack_require (main.78994579.js:64) at eval (BarChart.js:2) at Module../src/views/Charts/VueChartjs/ecomponents/BarChart.js(23.2464eff6.chunk.js:47)

    How will I solve this error can any one tell me how to implement this echart.

  • How to wrap html code by condition in vue without duplication code?

    Assume I want to wrap some html code in div. I can write

    <template>
  <div v-if="condition == true">
    //a lot of html
  </div>
  <template v-else>
    //a lot of html
  </template>
</template>

    But then I have to duplicate "a lot of html" block. Also I can extract a lot of html block in another component, but logically it's already separated component. Is there any way?

    P.S. In this topic I just simplified my case. I actually need to set two modes of rendering component by condition. First is div with some content inside, second is this div wrapped in table's cell with controls in another cells.

  • How to use ternary operator to set radio input attribute in Vue.js

    Is there a way to write ternary operator in Vue.js to set the state of a radio button? Right now I have v-if/v-else-if/v-else to display 3 types of radio buttons inside of a label. I'd like to somehow use a ternary operator to set an attribute of checked or disabled depending on if the current input is correct, incorrect, or a plain answer. I plan to use a ternary operator on to set the class of the input as well but that won't matter unless I can set a checked/disabled attribute on each input according to whether or not the answer is correct, incorrect, or a plain answer.

    <label class="form-check-label" 
    v-bind:style="
    (!question.Correct && question.AnswerGiven==(index+1)) ? wrongAnswer 
        : (!question.Correct && question.CorrectAnswer == (index+1)) ? rightgAnswer 
        :   plainAnswer">

        <!-- Wrong Answer -->
        <input type="radio" v-if="!question.Correct && question.AnswerGiven==(index+1)"
            v-on:input="changed(question.Question.ID,index)" 
            v-bind:class="{wrongAnswerInput: !question.Correct && question.AnswerGiven==(index+1)}"
            class="form-check-input" 
            :value="index" 
            :name="question.Question.ID" 
            checked>

        <!-- Correct Answer -->
        <input type="radio" v-else-if="!question.Correct && question.CorrectAnswer == (index+1)"
            v-on:input="changed(question.Question.ID,index)" 
            v-bind:class="{correctAnswerInput: !question.Correct && question.CorrectAnswer == (index+1)}"
            class="form-check-input" 
            :value="index" 
            :name="question.Question.TestSharedID" 
            checked>

        <!-- Plain Answer -->
        <input type="radio" v-else
            v-on:input="changed(question.Question.ID,index)" 
            class="form-check-input" 
            :value="index" 
            :name="question.Question.TestSharedID" 
            disabled>
            {{answer}}
</label>

    UPDATED CODE BELOW So this is what I've refactored it to.. but not sure if i've been staring at it too long but assign the correct classes is happening to each input element but now it's not disabling the normal inputs. Right now on load it is pre-checking an incorrect answer which is what I want but it isn't disabling normal inputs nor is it pre-checking the correct answer.

    <label class="form-check-label" 
    v-bind:style="
    (!question.Correct && question.AnswerGiven==(index+1)) ? wrongAnswer 
        : (!question.Correct && question.CorrectAnswer == (index+1)) ? rightgAnswer 
        :   plainAnswer">
        <!-- Wrong Answer -->
        <input type="radio"
            v-on:input="changed(question.Question.ID,index)" 
            v-bind:class="
            (!question.Correct && question.AnswerGiven == (index+1)) ? wrongAnswerInput
            : (!question.Correct && question.CorrectAnswer == (index+1)) ? correctAnswerInput
            :   plainAnswer"
            class="form-check-input" 
            :value="index" 
            :name="
            (!question.Correct && question.AnswerGiven == (index+1)) ? question.Question.ID
            : (!question.Correct && question.CorrectAnswer == (index+1)) ? question.Question.TestSharedID
            : question.Question.TestSharedID" 
            :checked="isChecked"
            :disabled="isDisabled">
            {{answer}}
</label>

    And the computed property is as follows...

        isDisabled() {
        let questions = this.reviewPanel.Questions
        for (let i = 0; i < questions.length; i++) {
            for (let j = 0; j < questions[i].Question.AnswerChoices.length; j++) {
                if(questions[i].Correct) {
                    return true
                }
            }
        }
    },
    isChecked() {
        let questions = this.reviewPanel.Questions

        for (let i = 0; i < questions.length; i++) {
            for (let j = 0; j < questions[i].Question.AnswerChoices.length; j++) {
                if(!questions[i].Correct && questions[i].CorrectAnswer == (j+1) || !questions[i].Correct && questions[i].AnswerGiven == (j+1)) {
                    return true
                }
            }
        }
    }
  • Unexpected behaviour removing a child component (row)

    Description:

    I have a table with some products, each row is a custom vue <row> component.

    Each element has a closing (removing) button that triggers the custom "remove" event. The main app listens to this event and removes the children (by index)

    The row a part from some static text it contains an input with a number.

    The problem:

    The parent (Vue app) removes the row, but the value of the input is then moved (and replaces its previous value) to the input in the next row.

    Expected behaviour:

    I want to simply remove the item I do not care about the value of the text input once it's removed. It should not move its value to the next sibling.

    I attach an example. ***Thanks in advanced

    let row = Vue.component('row', {
  name: 'row',
  props: ['number', 'name', 'sq'],
  data: () => ({
    quantity: 0
  }),
  template: '<tr>' +
    '<td>{{number}}</td>' +
    '<td>{{name}}</td>' +
    '<td><button v-on:click="quantity--">-</button><input type="text" :value="quantity"><button v-on:click="quantity++">+</button></td>' +
    '<td><button v-on:click="remove">&times;</button></td>' +
    '</tr>',
  methods: {
    remove: function() {
      this.$emit('remove', this.quantity)
    }
  },
  beforeMount() {
    this.quantity = this.sq
  }

})


new Vue({
  el: "#app",
  data: {
    out: [],
    rows: [{
        name: "Icecream",
        sq: 0
      },
      {
        name: "Sugar cube",
        sq: 50
      },
      {
        name: "Peanut butter",
        sq: 0
      },
      {
        name: "Heavy cream",
        sq: 0
      },
      {
        name: "Cramberry juice",
        sq: 0
      }
    ]
  },
  methods: {
    removeRow: function(index, quantity) {
      this.out.push(`Removing row ${index} (${this.rows[index].name} | ${quantity} units)`)
      this.rows.splice(index, 1)
    }
  },
  computed: {
    log: function() {
      return this.out.join("\r\n")
    }
  }
})
    body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

h2 {
  font-weight: bold;
  margin-bottom: 10px;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

td {
  padding: 4px 5px;
}

input {
  width: 40px;
  text-align: center;
}

h4 {
  margin-top: 20px;
  margin-bottom: 5px;
}

#log {
  padding: 10px;
  background: #20262E;
  color: #fff;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <h2>Cart:</h2>
  <table>
    <row v-for="(row, index) in rows" :number="index" :name="row.name" :sq="row.sq" v-on:remove="removeRow(index, $event)"></row>
  </table>

  <h4>Log</h4>
  <pre id="log" v-html="log"></pre>
</div>

    !***

  • How to share ajax results between two components with the first one using the second?

    First of all, I'm a beginner with VueJS, so I may presenting you a bunch of non-sens. :-) I read all the beginner doc, but I'm still stuck for this case.

    I have 2 template component managed by a functionnal component:

    <template>
  <h2>PageSpeed performance score: {{ results.score }}.</h2>
</template>

    The second one, using the first one (the first one is needed to be used elsewhere to display score only:

    <template>
  <div>
    <template v-if="results">
      <hosting-performance-score :results="results"/>

      <div
        v-for="(result, rule) in results.rules"
        v-if="result.ruleImpact > 0"
        :key="rule"
        class="panel panel-default"
      >
        <div class="panel-heading">{{ result.localizedRuleName }}</div>
        <div class="panel-body">
          <p>
            {{ result.summary.format }}

            <b>{{ result.ruleImpact }}</b>
          </p>
        </div>
      </div>
    </template>
    <i
      v-else
      class="fa fa-spin fa-spinner"
    />
  </div>
</template>

<script>
  import HostingPerformanceScore from './HostingPerformanceScore';

  export default {
    components: {
      HostingPerformanceScore,
    },
  };
</script>

    And then, the functional one with the AJAX logic:

    <script>
  import axios from 'axios';
  import axiosRetry from 'axios-retry';
  import HostingPerformanceScore from './HostingPerformanceScore';
  import HostingPerformancePage from './HostingPerformancePage';

  axiosRetry(axios);

  export default {
    functional: true,
    props: {
      scoreOnly: {
        default: false,
        type: Boolean,
      },
      slug: {
        required: true,
        type: String,
      },
    },
    data: () => ({
      results: null,
    }),
    created() {
      axios.get(Routing.generate('hosting_performance_pagespeed', {
        slug: this.slug,
      })).then((response) => {
        this.results = {
          rules: Object.entries(response.data.formattedResults.ruleResults).map((entry) => {
            const result = entry[1];

            result.ruleName = entry[0];

            return result;
          }).sort((result1, result2) => result1.ruleImpact < result2.ruleImpact),
          score: response.data.ruleGroups.SPEED.score,
        };
      });
    },
    render: (createElement, context) => {
      return createElement(
        context.props.scoreOnly ? HostingPerformanceScore : HostingPerformancePage,
        context.data,
        context.children
      );
    },
  };
</script>

    The issue is: I can't access the result and I don't know how to pass it properly: Property or method "results" is not defined on the instance but referenced during render.

    Or maybe functional components are not designed for this, but I don't know how to achieve it otherway. How would you do it?

    Thanks! :-)

  • Vuejs - vuex lazy load

    I have a fairly large VueJS SPA, and I just wanted to load the vuex modules on certain routes, using the lazy load.

    I was following this article to reproduce this - https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/

    However this is giving me an error in vuex.

    Folder structure

    root
  |- store
  | |- modules
  | | |- auth.js
  | | |- module2.js
  | |- store.js
  |- app.js

    auth.js

    const state = {
    var1: {},
    var2: false
}

const mutations = {
    'MUTATION_1'(state, obj) {
        // logic
    }
}

const actions = {
    action1({commit}) {
       // logic
    }
}

const getters = {
    var1: state => state.var1,
    var2: state => state.var2
}

export default {
    state,
    mutations,
    actions,
    getters
}

    store.js -

    import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
const store = new Vuex.Store();

import('./modules/auth.js').then(auth => {
    store.registerModule('/login', auth);
});

export default store;

    app.js -

    import Vue from 'vue';
import store from './store/store';
import VueRouter from 'vue-router';
import { routes } from './routes/routes';

// vue-router config
Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history',
    routes
});

const app = new Vue({
    el: '#app',
    store,
    router
});

    error -

    [vuex] unknown getter: var1

    Any suggestion?

  • How can I setup a props-based animate transition?

    So I'm really noobish with VueJS but I have experience with React... which doesn't help.

    My initial goal is to make 4 pages available, and, since they have an 'order', the transition classname would change accordingly.

    Here is my main.js file

    import Vue from "vue";
import VueRouter from "vue-router";
import Landing from "./components/Landing.vue";
import Bio from "./components/Bio.vue";
import Shop from "./components/Shop.vue";
import Contact from "./components/Contact.vue";
import App from "./components/App.vue";
import "./assets/style.css";

Vue.config.productionTip = false;
Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",

  routes: [
    {
      path: "/",
      component: Landing,
      name: "landing",
      props: { order: 1 }
    },
    {
      path: "/bio",
      component: Bio,
      name: "bio",
      props: { order: 2 }
    },
    {
      path: "/shop",
      component: Shop,
      name: "shop",
      props: { order: 3 }
    },

    {
      path: "/contact",
      component: Contact,
      name: "contact",
      props: { order: 4 }
    }
  ]
});

router.beforeEach((to, from, next) => {
  // TypeError: Cannot read property 'props' of undefined
  console.log(from.matched[0].props);
  next();
});

let vm = new Vue({
  router,
  el: "#app",
  data: {
    transitionName: ""
  },
  render: h => h(App)
});

    and here is my App.vue:

    <template>
  <div id="app">
    <transition name="test"> // will soon be replaced by ":name="transitionName"
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
// I don't know what I'm doing
export default {
  props: ["className"],

  data() {
    return {
      transition: this.className
    };
  }
};
</script>


<style>
.test-enter-active,
.test-leave-active {
  transition-property: opacity;
  transition-duration: 0.25s;
}

.test-enter-active {
  transition-delay: 0.25s;
}

.test-enter,
.test-leave-active {
  opacity: 0;
}

#Todo: Add missing classNames;
</style>

    I would like to compare the two order props to know what transition to pick, but, since I'm really new to Vue, I'm struggling to retrieve them correctly, or maybe I'm just not doing anything good at all.

    According to this link, props are meant to be passed in the url, which I don't want. Also, when I console log from from the router.beforeEach method (to doesn't seem to work, but I've heard about nextTick() ), I get to find my props but it can't find it with what I tested.

    How can I solve my problem?

    Thank you in advance

  • abort all Axios requests when change route use vue-router

    how can i abort / cancel Axios request before complete when i change route use vue-router.

    when user open page it automatically send axios request to get some data, but user don't waiting to get response then he is changing route by vue-router it will be a lot of Axios requests

    so is there any solve to my problem