标签: vuejs2
控制台警告:使用v-for呈现的组件列表应具有显式键
我在这里遇到了问题,我不知道我的代码有什么问题,但我在控制台中收到警告,如何删除此警告？
[Vue提示] ::
<todo-item v-for="todoItem in todos">使用v-for呈现的组件列表应具有显式键.有关详细信息,请参阅https://vuejs.org/v2/guide/list.html#key.
(找到<Root>)
的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Tutorial</title>
<link rel="shortcut icon" href="https://vuejs.org/images/logo.png">
<script src="scripts/vue.js"></script>
</head>
<body>
<section id="app">
<p>{{ msg }}</p>
<p v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</p>
<div>
<p v-if="seen">This text will show or hide if the button was clicked.</p>
<button type="button" v-on:click="isSeen">{{ isSeenText }}</button>
</div>
<ol>
<li v-for="todo in …推荐指数
解决办法
查看次数
什么是nextTick或它在VueJs中做了什么
我阅读了文档,但我无法理解.我知道什么数据,计算,观察,方法做什么,但nextTick()在vuejs中使用什么？
推荐指数
解决办法
查看次数
如何格式化Vue组件中的货币？
我的Vue组件是这样的:
<template>
<div>
<div class="panel-group"v-for="item in list">
<div class="col-md-8">
<small>
Total: <b>{{ item.total }}</b>
</small>
</div>
</div>
</div>
</template>
<script>
export default {
...
computed: {
list: function() {
return this.$store.state.transaction.list
},
...
}
}
</script>
结果{{ item.total }}是
2600
但我希望格式化如下:
26.000.000,00
在jquery或javascript中,我可以做到
但是,如何在vue组件中执行此操作？
推荐指数
解决办法
查看次数
VueJs 2.0将大孩子的事件发送到他的祖父组件
似乎Vue.js 2.0不会将大孩子的事件发送到他的祖父组件.
Vue.component('parent', {
template: '<div>I am the parent - {{ action }} <child @eventtriggered="performAction"></child></div>',
data(){
return {
action: 'No action'
}
},
methods: {
performAction() { this.action = 'actionDone' }
}
})
Vue.component('child', {
template: '<div>I am the child <grand-child></grand-child></div>'
})
Vue.component('grand-child', {
template: '<div>I am the grand-child <button @click="doEvent">Do Event</button></div>',
methods: {
doEvent() { this.$emit('eventtriggered') }
}
})
new Vue({
el: '#app'
})
这个JsFiddle解决了问题https://jsfiddle.net/y5dvkqbd/4/,但通过发布两个事件:
- 一个从大孩子到中间组件
- 然后再从中间组件发送到祖母
添加此中间事件似乎是重复且不必要的.有没有办法直接向祖父母发出我不知道的事情？
推荐指数
解决办法
查看次数
将文本复制到剪贴板：无法读取未定义的读取“writeText”的属性
我有一个按钮
当我点击复制时
copyImageLinkText({ mouseenter, mouseleave }, e) {
this.showCopiedText = !this.showCopiedText
navigator.clipboard.writeText(this.imageLink)
clearTimeout(this._timerId)
mouseenter(e)
this._timerId = setTimeout(() => mouseleave(e), 1000)
},
这条线似乎在我的 MacBook Pro 上本地运行得很好
navigator.clipboard.writeText(this.imageLink)
当我构建并将其部署到我的开发服务器时，它不起作用。
类型错误：无法读取未定义的属性（读取“writeText”）
推荐指数
解决办法
查看次数
如何从Vuex中的另一个getter调用getter？
考虑一个简单的Vue博客:
我使用Vuex作为我的数据存储区,我需要设置两个getter:一个getPost用于检索postID 的getter ,以及一个listFeaturedPosts返回每个特色帖子的前几个字符的getter .特色帖子列表的数据存储架构按其ID引用帖子.为了显示摘录,需要将这些ID解析为实际帖子.
存储/ state.js
export const state = {
featuredPosts: [2, 0],
posts: [
'Lorem et ipsum dolor sit amet',
'Lorem et ipsum dolor sit amet',
'Lorem et ipsum dolor sit amet',
'Lorem et ipsum dolor sit amet',
'Lorem et ipsum dolor sit amet',
]
}
存储/ getters.js
export default getPost = (state) => (postID) => {
return state.posts[postID]
}
export default listFeaturedPosts = (state, getters) => () => …推荐指数
解决办法
查看次数
将全局变量应用于Vuejs
我有一个javascript变量,我想在实例化时全局传递给Vue组件,因此每个注册的组件都将它作为属性或者可以全局访问.
注意::我需要将vuejs的这个全局变量设置为READ ONLY属性
推荐指数
解决办法
查看次数
.$ mount()和el [Vue JS]之间的区别
这段代码有什么区别:
new Vue({
data () {
return {
text: 'Hello, World'
};
}
}).$mount('#app')
还有这个:
new Vue({
el: '#app',
data () {
return {
text: 'Hello, World'
};
}
})
我的意思是使用.$mount()而不是el反之亦然的好处是什么？
推荐指数
解决办法
查看次数
Vue.js动态图像不起作用
我有一个案例,在我Vue.js的webpack网络应用程序中,我需要显示动态图像.我想显示img图像的文件名存储在变量中的哪个位置.该变量是一个computed返回Vuex存储变量的属性,该变量正在异步填充beforeMount.
<div class="col-lg-2" v-for="pic in pics">
<img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">
</div>
然而,当我这样做时它完美地工作:
<img src="../assets/dog.png" alt="dog">
我的情况类似于这个小提琴,但这里它适用于img URL,但在我的实际文件路径中,它不起作用.
什么应该是正确的方法呢？
推荐指数
解决办法
查看次数
Vue JS 2.0没有渲染任何东西？
使用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>
空白的白色屏幕,我错过了什么吗？ …
推荐指数
解决办法
查看次数