vue-component

I am attempting to make a vue with vue-chartjs. I have followed all the associated documentation with regards to re-rendering the chart when the chartData prop is updated. My chart will only update after i resize the browser window. my parenttestchart.vue file: <template> <div> <h1>Chart datacollection update test</h1> <p>This component demonstrates fetching data from the server.</p> <p v-if="!datacollection"><em>Loading...</em></p> <b-form-select v-model="testthingSelect.selected" text="Select testthing" variant="primary" :options="testthingSelect.options" :on-change="changetestthing" class=

The question may sound basic, but I am unable to figure out how to do it in VueJS I have the following in html <script> var config = {'cols':4,'color':'red'} </script> <div id="app"> <mycomponent :config="config"></mycomponent> </div> var app = new Vue({ el: '#app', data: { // config: config // I do not want to pass this } }) Following is the use case: I know this isn't working because config variable in the component is looking for app.config I do not want to pass it as data{ config:config } in the Vue Object. I can pass it as <mycomponent :config="{'cols':4,'color':'red'}"></mycomponent> but

I have navigation component like this: <template> <nav class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="">Website Builder</a> </div> <div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li> <a href="#" @click.native="currentView='create'">Create</a> </li> <li> <a href="#" @click.native="currentView='how'">How</a

I have an External Java Script File something.js function myFun(){ document.getElementById("demo").innerHTML="Hello World!"; } export default myFun; and this is my vue component Dashboard.vue <template> <div> <button type="button" name="button" @click="">Call External JS</button> <div id="demo"></div> </div> </template> <script> import something from "./something.js" export default { created(){ } } </script> I have two questions. First how do I call this method inside the created life cycle hook to automatically run. Second how do I call this method by hitting the button "Call External JS" Of

Is there a way to simplify this code? The button should also change the localValue of the child. Vue.component('my-input', { template: ` <div> <b>My Input:</b> <br> localValue: {{ localValue }} <br> <input v-model="localValue"> </div> `, props: ['value'], data() { return { localValue: this.value } }, watch: { value () { this.localValue = this.value }, localValue () { this.$emit('input', this.localValue) } } }) new Vue({ el: '#app', data: () => ({ parentValue: 'Inital value' }), methods: { change () { this.parentValue = 'Changed value' } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs

I know Vue.js has functionality built in to debounce on an input field. I have created a slider that fires a method that does not use an input field though, and I was wondering if I can take advantage of the debounce functionality inside of a method. Is it even possible to use this functionality outside of simply adding a debounce to an input? Or do I need to write my own functionality for this? I've just tried doing something like this but it does not seem to work: this.$options.filters.debounce(this.search(), 2000); For anyone who is wondering on how to do this. I fixed this by using an

I have created a component like this: <template> <span class="my-icon"> <img :src="iSrc" :alt="iname"/> </span> </template> <script> export default { props: ['iname'], computed: { iSrc() { return require('../../../assets/images/' + this.iname + '.png') } } } </script> Using it inside a page like this: <template> <div> <h3>Share it:</h3> <social-sharing inline-template network-tag="a"> <div class="my-icons"> <network network="facebook" class="fb-icon"> <icon name="fb" /> </network> </div> </social-sharing> </div> </template> <script> import Icon from '~/comps/icon.vue' export default {

I am struggling for this to work. I need to access the selected value in the ChooseLangComponent from the FormComponent. Is there any direct way to do this or we have to pass it from the parent component (act like middle man)? I already tried with $emit on ChooseLangComponent and v-on:.. on FormComponent but didn't work. ChooseLangComponent: <template lang="html"> <div class="choose-lang"> <select v-model="selected"> <option v-for="lang in langs" v-bind:value="lang.value">{{lang.text}}</option> </select> </div> </template> <script> export default { data() { return { selected: 'en', langs: [ {