小编Ber*_*ert的帖子

我正在使用Sortable.js和Vue.js。目标是对项目进行排序并保持数据更新。

它在Vue 1.x上运行良好，但是在更新到2.0之后，排序变得不正确。数组仍然可以正确更新，但是DOM中的项目放置在错误的位置。

new Vue({
  el: '#app',
  template: '#sort',
  data: function() {
    return {
      items: [
        "http://placehold.it/200X300?text=image1",
        "http://placehold.it/200X300?text=image2",
        "http://placehold.it/200X300?text=image3",
        "http://placehold.it/200X300?text=image4"
      ],  
    }
  },
  mounted: function() {
    this.$nextTick(function () {
      Sortable.create(document.getElementById('sortable'), {
        animation: 200,
        onUpdate: this.reorder.bind(this),
      });
    })
  },
  methods: {
    reorder: function(event) {
        var oldIndex = event.oldIndex,
            newIndex = event.newIndex;
        this.items.splice(newIndex, 0, this.items.splice(oldIndex, 1)[0]);

    } 
   }
});

jsFiddle https://jsfiddle.net/4bvtofdd/4/

有人能帮我吗？

与runtime-only新项目的Vue.js 的构建版本一起使用.我在文档中看到要切换到standalone需要为webpack添加别名的人,如下所示:

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.js'
  }
}

目前,我的应用程序中不需要编译器.但是,在某些时候我可能需要切换到standalone构建.

我的问题是: 它是否会在之间runtime-only和standalone之后进行无痛的切换,还是需要大量的重构？

如果确实如此,我可能会从standalone以后开始并避免重构.

我正在尝试使用vuex将一个数组从我的api拉到一个组件,但是我很茫然,并且可能在我的脑海中尝试这个.随着api直接从一个组件访问我有它设置像这样,它很好:

data () {
 return {
  catalog:[],
 }
},
created() {
 this.$http.get('https://example.net/api.json').then(data => {
  this.catalog = data.body[0].threads;
 })
}

作为参考,json看起来类似于:

[{
"threads": [{
 "no: 12345,
 "comment": "comment here",
 "name": "user"
}, {
 "no: 67890,
 "comment": "another comment here",
 "name": "user2"
}],

//this goes on for about 15 objects more in the array

 "page": 0
}]

当我把这一切都移到商店时,我正在失去对如何实现这项工作的把握.我之前从未使用过vuex资源.

//store.js

state: {
    catalog: []
},
actions: {
    getCatalog({commit}){
        Vue.http.get('https://example.net/api.json').then(response => {
            commit('LOAD_CATALOG', response.data.data)
        });
    }
},
mutations: {
    LOAD_CATALOG (state) {
        state.catalog.push(state.catalog)
    } …

我有一个名为"sortable"的自定义指令,但我遇到了DOM的问题.问题是当我拖放项目时,数组被更改但DOM不是.

这是我的自定义指令:

 Vue.directive('sortable', {
    bind: function(el, binding, vnode) {
        // Initialize sortable
        this.sortable = Sortable.create(el, {});
        console.debug("Sortable initialized");

        this.sortable.option("onUpdate", function(event) {
            binding.value.move(event.oldIndex, event.newIndex);
            var updated = binding.value;
            Vue.set(tasks, updated);
        });
    }
});

这就是我创建Vue实例的方法:

app = new Vue({
    el: "#app",
    data: {
        subtotal: 0,
        tasks: [
            {name: '', quantity: '', rate: 80, costs: ''}
        ]
    },
    methods: {
        newTask: function() {
            this.tasks.push({name: '', quantity: '', rate: 80, costs: ''})
        },
        deleteTask: function(index) {
            this.tasks.splice(index, 1);
            this.calculateTotal();
        },
        calculateCosts: function(event, value, index) …

我有一个Vue子组件,它显示一个bootstrap模式并需要一些字段,其中一个字段是下拉选择.无论出于何种原因,下拉按钮都不会激活,因此下拉项目不会显示:'aria-expand'在单击时保持为false.我的问题是代码清楚地在组件之外工作,所以我真的不明白出了什么问题.这是我正在寻找的工作JSfiddle.

我用于我的Vue组件的代码完全相同,除了

`<template>
    <div> 
        // insert jsfiddle code here
    </div>
</template>
<script>
    export default{}
</script>`

该组件工作正常,按下按钮时模式显示,它只有下拉列表不起作用.如果它以任何方式相关,我使用laravel的单文件vue组件.

我有一个计算属性countryName,它根据国家代码返回一个国家名称,并且工作正常.我需要使用该countryName值的价值label的的country数据属性,但我得到的undefined.

export default {
    props: ['content'],
    data () {
        return {
            countries: require('../../plugins/countries'),
            country: {
                value: this.content.country_code,
                label: this.countryName
            }
        }
    },
    computed: {
        countryName () {
            return this.countries.find(item => item.value === this.content.country_code).label
        }
    }
}

在下面的代码中，标记为“添加更多”的按钮未按预期运行。理想情况下，它应该将输入值添加到页面上的无序列表中。相反，我收到以下错误：

未捕获的类型错误：document.queryselector 不是函数

页面代码

<div id="root">
    <input type="text" id="input" v-model="message"/>

    <p>The value of the input is : {{message}}</p>

    <ul>
        <li v-for="n in names" v-text="n"></li>
    </ul>

    <input id="input1" type="text"/>

    <button id="button"> Add More </button>
</div>

<script>
    var app = new Vue ({
        el : '#root',
        data : {
            message : 'Hello World!',
            favourite : 'author',
            names : ['Sunil' , 'Anis' , 'Satyajit']
        },
    });

    document.queryselector('#button').addEventListener('click', function(event) {
        var n = document.queryselector('#input1');
        app.names.push(n.value);
        n.value = '';
    });

</script>

假设我们有一个表单组件：

<!-- appform.vue -->
<template>
    <form @submit.prevent="onSubmit">
        <slot></slot>
        <input type="submit">
    </form>
</template>

在我的应用程序中，我想使用它并向其动态添加表单域：

<!-- app.vue -->
<template>
    <appform>
        <input type="text" name="firstname" />
        <input type="text" name="lastname" />
    </appform>
</template>

现在我需要告诉 vuejs，我想将每个输入字段绑定到 appform 组件数据字段的“模型”变量。

<!-- app.vue -->
<template>
    <appform>
        <input type="text" name="firstname" :model="model.firstname" />
        <input type="text" name="lastname" :model="model.lastname" />
    </appform>
</template>

当然，这是行不通的，因为 vuejs 说，该模型不在应用程序数据字段内。如何告诉它使用 appform 组件的“模型”而不是当前范围？

我正在学习Vue，在这里不能说出我做错了什么。数据正在从服务器返回（5条记录），但没有放入<select>;中。我所得到的只是一个单一的选择，说{{dept.DName}}

<html>
<head><link href="Content/bootstrap.min.css" rel="stylesheet" />
    <meta charset="utf-8" />
    <title></title>
</head>
<body class="container">
<div>
    <select id="deptList">
        <option v-model="selected" v-for="dept in app.depts" v-bind:value="dept.Did">
            {{dept.DName}}
        </option>
    </select>    
</div>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/moment.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
<script src="Scripts/vue-controller.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

脚本/vue-controller.js包含：

var app = new Vue({
    data: {
        el: "body",
        depts: [],
        emps: [],
        selected: ""
    },
    methods: {
        getDepts: function () {
            console.log("I'm a little teapot");  // this appears in the log
            this.$http.get("/Dept/Index").then(function(response) {
                this.depts = …

我正在尝试切换多个元素的类Vuejs 2.0,我有以下一组按钮,它们有一个类btn-primary.单击按钮可显示该特定元素的子组.这是我的代码:

<button class="btn btn-primary btn-xs" v-on:click.prevent="getTags('investor')">Investor</button>
<button class="btn btn-primary btn-xs" v-on:click.prevent="getTags('research')">Research</button>
<button class="btn btn-primary btn-xs" v-on:click.prevent="getTags('company')">Company</button>

这显示以下元素:

<div v-if="tag.investor">
    <button class="btn btn-primary btn-xs" v-on:click.prevent="selectTags('Investor - Mutual Funds')">Mutual Fund</button>
    <button class="btn btn-primary btn-xs" v-on:click.prevent="selectTags('Investor - Insurance')">Insurance</button>
    <button class="btn btn-primary btn-xs" v-on:click.prevent="selectTags('Investor - FII')">FII</button>
</div>
<div v-if="tag.research">
    <button class="btn btn-primary btn-xs" v-on:click.prevent="selectTags('Research - Tier I')">Research - Tier I</button>
    <button class="btn btn-primary btn-xs" v-on:click.prevent="selectTags('Research - Tier II')">Research - Tier II</button>
</div>

我有以下内容data():

tag: {
    investor: false, …

我正在使用加密货币的应用程序,所以现在我有2个组件:MyCoins:

Vue.component('mycoins',{
data() {
    return {
        coins: [],
    }
},
template: `
    <ul class="coins">
        <coin v-for="(coin, key) in coins" :coin="coin.coin_name" :key="coin.coin_name"></coin>
    </ul>
`,
methods: {
    getStats() {
        self = this;
        axios.get('api/user/coins').then(function (response) {
            console.log(response.data.coins);
            self.coins = response.data.coins;
          })
          .catch(function (error) {
            console.log(error);
          });
    }
},
mounted() {
    this.getStats();
}

})

在url'api/user/coins'上我得到这些数据:

{"coins":
[{"id":1,"coin_name":"ethereum","user_id":1,"buy_price_usd":"341.44000","buy_price_btc":"0.14400","created_at":"2017-09-25 20:40:20","updated_at":"2017-09-25 20:40:20"},
    {"id":2,"coin_name":"bitcoin","user_id":1,"buy_price_usd":"12.00000","buy_price_btc":"14.00000","created_at":"2017-09-25 21:29:18","updated_at":"2017-09-25 21:29:18"},
    {"id":3,"coin_name":"ethereum-classic","user_id":1,"buy_price_usd":"33.45000","buy_price_btc":"3.00000","created_at":"2017-09-25 21:49:50","updated_at":"2017-09-25 21:49:50"},{"id":4,"coin_name":"lisk","user_id":1,"buy_price_usd":"23.33000","buy_price_btc":"0.50000","created_at":"2017-09-25 21:51:26","updated_at":"2017-09-25 21:51:26"}]}

然后我有这个组件:硬币:

Vue.component('coin',{
data() {
    return {
        thisCoin: this.coin,
        coinData: {
            name: "",
            slug: "",
            image: "https://files.coinmarketcap.com/static/img/coins/32x32/.png",
            symbol: …