小编Ber*_*ert的帖子

我在Vue模板中有一个简单的输入框,我想或多或少地使用debounce:

<input type="text" v-model="filterKey" debounce="500">

但是,该debounce物业已在Vue 2中弃用.该建议仅说:"使用v-on:输入+第三方去抖功能".

你是如何正确实现它的？

我试图使用lodash,v-on:input和v-model来实现它,但我想知道是否可以不使用额外的变量.

在模板中:

<input type="text" v-on:input="debounceInput" v-model="searchInput">

在脚本中:

data: function () {
  return {
    searchInput: '',
    filterKey: ''
  }
},

methods: {
  debounceInput: _.debounce(function () {
    this.filterKey = this.searchInput;
  }, 500)
}

然后在computed道具中使用filterkey .

在vuejs 2.0 model.sync中将被弃用.

那么,在vuejs 2.0中兄弟组件之间进行通信的正确方法是什么？

我在Vue 2.0中发现的想法是通过使用商店或事件总线进行兄弟姐妹的沟通.

据埃文说:

值得一提的是"在组件之间传递数据"通常是一个坏主意,因为最终数据流变得无法跟踪并且很难调试.

如果一个数据需要由多个组件共享,则更喜欢 全局存储或Vuex.

[ 链接到讨论 ]

和:

.once并且.sync已弃用.道具现在总是单向下降.要在父作用域中产生副作用,组件需要显式地emit显示事件而不是依赖于隐式绑定.

(所以,他建议使用$emit和$on)

我很担心因为:

• 每个store并event具有全球知名度(纠正我,如果我错了);
• 为每个次要的沟通创建一个新的商店是很重要的;

我想要的是以某种方式或兄弟姐妹组件的可见性范围.或者也许我没有抓住这个想法.eventsstores

那么,如何以正确的方式沟通？

使用Vue(^ 2.0.0-rc.6) + Browserify,入口点是index.js:

import Vue from 'vue'
import App from './containers/App.vue'

new Vue({ // eslint-disable-line no-new
  el: '#root',
  render: (h) => h(App)
})

App.vue:

<template>
  <div id="root">
    <hello></hello>
  </div>
</template>

<script>
import Hello from '../components/Hello.vue'
export default {
  components: {
    Hello
  }
}
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

Hello.vue:

<template>
  <div class="hello">
    <h1>\{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

空白的白色屏幕,我错过了什么吗？ …

我正在用Vue.js创建一个组件.

当我引用this中的任何所述的生命周期钩(created,mounted,updated等等)它的计算结果为undefined:

mounted: () => {
  console.log(this); // logs "undefined"
},

在我的计算属性中也发生了同样的事情:

computed: {
  foo: () => { 
    return this.bar + 1; 
  } 
}

我收到以下错误:

未捕获的TypeError:无法读取未定义的属性"bar"

为什么在这些情况下进行this评估undefined？

我正在尝试设置一个看起来像我自己的项目的测试项目,只是为了让事情先行,它看起来像这样:

/MainProject/inc/main.h
/MainProject/src/main.cpp
/LibProject/inc/test.h
/LibProject/src/test.cpp

我找到了一些教程,但是当我有inc和src文件夹时,我无法找到如何设置它？CMakeLists.txt文件看起来如何？我会在每个项目文件夹中有一个/,一个吗？好像我不需要在inc和src文件夹中有一个？

我正在VueJS中创建一个游戏,当页面加载时,我想要一个方法来激活,对外部API进行ajax调用并创建一堆数据属性.当玩家赢得回合时,我希望他们能够看到一个允许他们重新开始游戏的按钮.我mounted()在页面加载时使用钩子来触发方法.

我的问题是,如果游戏设置和API调用在mounted()函数内,我不确定如何实现重启功能.有没有办法mounted()再次运行该功能？

谢谢!

码:

export default {
    props: {
        article: {type: Object}
    },
    data () {
        return {article: this.article}
    }, 
    methods: {
        itemClick () {
            console.log('itemClick');
        }
    }
};

Chrome开发人员工具中的Vue2.1.10警告:数据属性"article"已声明为prop.请改用prop默认值.

我想在Vue.js应用程序中使用一些全局过滤器.我知道我需要在我的主Vue实例之前定义它们,但从代码组织的角度来看,将它们全部放在'main.js'文件中对我来说似乎并不合适.我怎么能将这些定义放在一个单独的文件中,导入'main.js'？我不能完全理解这个导入/导出的东西.

Vue中是否有一个事件在元素重新渲染后被触发？我有一个更新的对象,这会导致我的模板更新.更新后,我想触发一个运行jQuery函数的事件.代码如下所示:

template: `
    <div class="undo-margin">
        <div class="gradient">
            <img v-bind:src="blogPost.thumbnail"/>
            <h1 class="align-bottom">{{blogPost.title}}</h1>
        </div>

        <div class="container bg-faded">
            <article v-html="blogPost.article"></article>
        </div>
    </div>

`,
props: ["blogid"],
data: function () {
    return blogPageData;
},
mounted: function () {
    const blogid = jQuery("#blogPage").attr("blogid");
    if (this.authdata.roles.indexOf("Administrator") !== -1) {
        this.isAdmin = true;
    }

    this.getBlogPost(blogid);
},
methods: {
    getBlogPost: function (blogid) {
        var element = this;
        $.ajax({
            url: `/api/blog/${blogid}`,
            type: "get",
            headers: headers,
            success: function (data) {
                if (data === undefined) {
                    window.location.replace("/blog");
                } else {
                    element.isDetails = …

我正在尝试编写我的第一个Vuejs应用程序.我使用vue-cli和简单的WebPack样板.

当我vue-router向我的应用程序组件添加链接时,我在控制台中收到此错误

渲染函数出错:"TypeError:无法读取未定义的属性'匹配'"

这是我的代码:

App.vue

<template>
  <div>
    <h2>Links</h2>
    <ul>
      <router-link to='/'>Home</router-link>
      <router-link to='/query'>Query</router-link>

      <router-view></router-view>
    </ul>
  </div>
</template>

<script>
    export default {}
</script>

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
import routes from './routes.js'
import App from './App.vue'

const app = new Vue({
  el: '#app',
  routes,
  render: h => h(App)
})

routes.js

import VueRouter from 'vue-router';
let routes=[
  {
    path: '/',
    component: require('./Components/Home.vue')
  },
  {
    path: '/query',
    component: require('./Components/Query.vue')
  }
];

export …