标签: vue-component

关于将数据从根实例传递到组件的正确方法,我有点困惑.

假设我有这个根实例:

const app = new Vue({
    el: '#app',

    data: {
        foo: 'bar'
    },
});

然后我在一个单独的.vue文件中有一个组件:

<template>
    <div>I'm a component!</div>
</template>

<script>
    export default {
        methods: {
            fooTest: function() {   
                console.log(this.$root.$data.foo);
            },
        },

        mounted() {
           this.fooTest();
        }
    }
</script>

这很好用.fooTest将从根实例数据中获得"bar".

但这是正确的方法吗？或者最佳做法是什么？

在我的vue组件js代码中,我收到此错误:

未捕获的SyntaxError:无效或意外的令牌

这是我的代码:

Vue.component('pickpoint-info', {

    template : '<table>\ // in this line I get the error
                    <tbody>\
                        <tr v-for="item in items" v-on:click="selectPickPoint(this)">\
                            <td width="50" align="center"><input name="pickpointid" type="radio" value="{{ item.customer_id }}"></td>\
                            <td width="300">\
                                <b>{{ item.name }}</b> <i style="font-size:9px;">#{{ item.customer_id }}</i>\
                                <br>\
                                {{ item.address }}\ 
                                <br>\ 
                                {{ item.postal_code }}\
                                <a href="{{ item.map_link }}" target="_blank" style="font-size:10px;">(ver en el mapa</a>)\
                            </td>\
                        </tr>\
                    </tbody>\
                </table>\
    ',

这段代码有什么问题？

我的vue组件是这样的:

<template>
    <a :class="'btn ' + [respond == 'responseFound' ? ' btn-yellow' : ' btn-default', type == 1 ? ' btn-block' : ' btn-xs center-block']">
       ...
    </a>
</template>

我尝试这样,但它不起作用？

VueJs新手.我想知道如何/在哪里进行Ajax调用以动态提取数据以填充以下Vue表？

https://jsfiddle.net/yyx990803/xkkbfL3L/?utm_source=website&utm_medium=embed&utm_campaign=xkkbfL3L

我(大致)修改了上面的例子如下:

var demo = new Vue({
  el: '#demo',
  data: {
    searchQuery: '',
    gridColumns: ['name', 'power'],
    gridData: []
  },
  methods: {
    fetchUsers: function() {
      ...
      // ajax call using axiom, fetches data into gridData like this:
      axios.get('http://localhost/url')
        .then(function(response) {
           this.gridData = response.data;
        })
        .catch(function(error) { console.log("error"); })
      ...
    }
  },
  created: function() {
    this.fetchUsers();
  }
})

我正在尝试从这里加入ajax片段:

https://jsfiddle.net/chrisvfritz/aomd3y9n/

我添加了fetchUser方法,它调用ajax来拉取数据.我可以使用fetch和axiom下拉我的数据并将其打印到控制台,所以我知道该部分有效.

但是,我的数据永远不会出现或更新.该表加载空白.我认为这与我在Vue模型对象(demo)上放置方法和创建钩子有关,而不是在组件本身上.但我不太确定如何修改示例来解决它,因为该示例从父级传递数据.

有人可以给我一些指导吗？

每次我在主应用程序中插入标记时,它总是呈现一个新行,它不能是内联的吗？我希望实现这样的目标:

<p>This is a component :<component></component></p>
<!--worked with other html tags-->

结果改为:

This is a component :
component content

当然我可以This is a component :在组件中插入前缀作为道具,所以它可以是内联的,至少是为了显示,但这并不总是我打算成为..

我想知道Vue存储css模板的组件.谢谢社区.

尝试使用jquery选择vue,问题是这个插件隐藏了我应用v-model的实际选择,所以当我选择一个值时,vue不会将其识别为select change事件,并且模型值不会更新.

我见过Vue 1的一些解决方案,它不适用于Vue 2

它显示当前值,但不知道如何设置以使模型值发生变化.

http://jsfiddle.net/q21ygz3h/

Vue.directive('chosen', {
 twoWay: true, // note the two-way binding
  bind: function(el, binding, vnode) {

Vue.nextTick(function() {
  $(el).chosen().on('change', function(e, params) {
    alert(el.value);
  }.bind(binding));
});
},
    update: function(el) {
// note that we have to notify chosen about update
// $(el).trigger("chosen:updated");
 }
  });

var vm = new Vue({
 data: {
   cities: ''
 }
 }).$mount("#search-results");

所以我正在创建一个Vuejs应用程序,我正在尝试在组件安装上获取firebase数据.这是有效的,但我尝试将值写入vuejs数据属性.为此,我只会this.property = snapshot.val();在firebase函数内部调用(参见下面的代码),但这不起作用:this is undefined

所以我的代码就是:

export default {
  data() {
    return {
      imageList: "No images!"
    }
  },
  mounted() {
    if (!firebase.apps.length) {
      // Initialize Firebase
      var config = {
        ...
      };

      firebase.initializeApp(config);

      var database = firebase.database();
      var ref = database.ref("images").orderByChild("date");


    firebase.database().ref("images/").once('value').then(function(snapshot) {
        this.imageList= snapshot.val();
      });
    }
  }
}

我尝试this.imageList= snapshot.val();使用变量来调用函数外部以存储值,并且'this'不再是未定义的,但数据不存在,因为请求尚未完成.

所以基本上我想得到snapshot.val(); 进入this.imageList!

提前致谢.

我为Vue 2创建了一个自定义的select2输入元素。

我的问题是：为什么

<select2 v-model="vacancy.staff_member_id" @input="update(vacancy)"></select2>

工作，但是

<select2 v-model="vacancy.staff_member_id" @change="update(vacancy)"></select2>

不？

由于<input>Vue中的普通元素具有@change处理程序，因此如果我的自定义select2输入具有相同的效果会很好。

有关我的自定义元素的一些信息：

该元素的目的不是呈现所有<option>元素，而是仅呈现所需的那些元素，因为我们在一页上有很多select2输入，而在select2输入内有很多选项，这会导致页面加载变慢。

该解决方案使其速度更快。

<select2 v-model="vacancy.staff_member_id" @input="update(vacancy)"></select2>

我有组件方法更新的可编辑元素,但我也有json导入,我想更新元素我的父方法.我可以更新模型,但可编辑元素不会绑定它.如果我将内容插入组件模板,它将绑定更新的模型,但后来我无法真正编辑它.

这是我的例子:https://jsfiddle.net/kuwf9auc/1/

Vue.component('editable', {
    template: '<div contenteditable="true" @input="update"></div>',  /* if i insert {{content}} into this div, it wil update, but editing behave weird */
    props: ['content'],
    mounted: function () {
        this.$el.innerText = this.content;
    },
    methods: {
        update: function (event) {
            console.log(this.content);
            console.log(event.target.innerText);
            this.$emit('update', event.target.innerText);
        }
    }
})

var app = new Vue({
    el: '#myapp',
    data: {
        herobanner: {
            headline: 'I can be edited by typing, but not updated with JSON upload.'
        }
    },
    methods: {
        uploadJSON: function (event) …

我正在学习vuejs，但找不到正确的答案。当我单击“编辑年龄”按钮或更改“我的姓名”按钮时，出现以下错误。

[Vue警告]：避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖。而是使用基于属性值的数据或计算属性。道具被突变：“ myName”

[Vue警告]：避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖。而是使用基于属性值的数据或计算属性。变异的道具：“ userAge”

代码在这里。

https://codesandbox.io/s/k2197nr4o3

请让我知道这段代码有什么问题。