Questions tagged «vue.js»

我有两个嵌套的组件，从父级访问子级方法的正确方法是什么？ this.$children[0].myMethod() 似乎可以解决问题，但这很丑陋，不是吗，还有什么更好的方法： <script> import child from './my-child' export default { components: { child }, mounted () { this.$children[0].myMethod() } } </script>

91 javascript  vue.js 

我正在尝试使用触发该foo()功能，@click但是如您所见，需要按两次单选按钮才能正确触发该事件。仅在第二次按下时捕获该值。 我想触发事件而不@click只是在v-model（srStatus）更改时触发事件。 这是我的小提琴： http://fiddle.jshell.net/wanxe/vsa46bw8/

90 javascript  events  vue.js 

我正在寻找引用静态资产的正确网址，例如Vue javascript中的图像。 例如，我正在使用自定义图标图像创建传单标记，并且尝试了多个网址，但它们都返回了404 (Not Found)： Main.vue： var icon = L.icon({ iconUrl: './assets/img.png', iconSize: [25, 25], iconAnchor: [12, 12] }); 我试过将图像放在资产文件夹和静态文件夹中没有任何运气。我是否必须告诉Vue以某种方式加载这些图像？

90 javascript  vue.js  leaflet 

我有一种情况，在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，但是在我的具有实际文件路径的情况下，它不起作用。 正确的方法是什么？

90 javascript  html  vue.js  vuejs2 

我是Vue.js的初学者，我试图创建一个能够满足日常任务的应用程序，然后遇到了Vue Components。因此，以下是我尝试过的操作，但不幸的是，它给了我这个错误： vue.js：1023 [Vue警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。 有什么想法，请帮忙吗？ new Vue({ el : '#app', data : { tasks : [ { name : "task 1", completed : false}, { name : "task 2", completed : false}, { name : "task 3", completed : true} ] }, methods : { }, computed : { }, …

89 javascript  vue.js 

我正在尝试将图像的src绑定到元素中，但似乎无法正常工作。我收到一个“无效的表达式。生成的函数主体：{backgroundImage：{url（image）}”。 该文档说使用“ Kebab-case”或“ camel-case”。 <div class="circular" v-bind:style="{ backgroundImage: { url(image) }"></div> 这是一个小提琴：https : //jsfiddle.net/0dw9923f/2/

89 javascript  html  css  vue.js 

似乎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 …

87 javascript  vuejs2  vue.js 

假设我有一个Vue实例，如下所示： new Vue({ el: '#app', data: { word: 'foo', }, filters: { capitalize: function(text) { return text.replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); }); } }, methods: { sendData: function() { var payload = this.$filters.capitalize(this.word); // how? } } } 我可以轻松地在模板中使用过滤器，如下所示： <span>The word is {{ word | capitalize }}</span> 但是，如何在实例方法或计算属性中使用此过滤器？（显然，该示例很简单，我的实际过滤器更复杂）。

86 javascript  vue.js 

我如何访问$refs内部计算？第一次运行计算属性始终是未定义的。

85 vue.js 

我正在寻找Vue.js作为Angular的替代产品，到目前为止我真的很喜欢。为了感受一下，我将现有的Angular项目重构为Vue项目。我正好需要与REST API通信。 在Angular中，我曾经为此定义了一个服务，该服务被注入到每个需要它的控制器中。据我了解，Vue似乎并不了解“服务”构造。在Vue中如何实现？ 我考虑过了vue-resource，但据我了解，它仅用于http功能。当我也使用jQuery时，这已经过时了。 例： 我有vueComponent1和vueComponent2。两者都需要访问相同的REST资源。为了解决这个问题，我需要一个中央服务，这两个组件都可以用于对REST资源的请求。Angular具有“服务”组件，正是这一点。Vue还没有。

84 javascript  rest  vue.js 

我的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 }}是 26000000 但是我想格式化它是这样的： 26.000.000,00 在jQuery或JavaScript中，我可以做到 但是，如何在vue组件中做到这一点？

81 vue.js  vuejs2  vue-component  vuex 

这段代码有什么区别： new Vue({ data () { return { text: 'Hello, World' }; } }).$mount('#app') 和这个： new Vue({ el: '#app', data () { return { text: 'Hello, World' }; } }) 我的意思是使用.$mount()而不是相反有什么好处el？

81 vue.js  vuejs2 

当我想进行多次搜索时，会显示NavigationDuplicated错误。我的搜索在导航栏中，而我配置搜索的方式是使用模型获取值，然后将该值作为参数传递给ContentSearched组件，然后在该组件中接收搜索的值。 我知道正确的方法是使用发射器，但是我仍然不知道如何学习使用它。要访问发射是context.emit('', someValue) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/search") is not allowed", stack: "Error↵ at new NavigationDuplicated (webpack-int…node_modules/vue/dist/vue.runtime.esm.js:1853:26)"} 导航栏 <template> <nav class="navbar navbar-expand-lg navbar-dark bg-nav" v-bind:class="{'navbarOpen': show }"> <div class="container"> <router-link to="/" class="navbar-brand"> <img src="../assets/logo.png" alt="Horizon Anime" id="logo"> </router-link> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" …

81 javascript  vue.js  vuejs2 

我正在使用Laravel和Vue制作购物车系统。当我将商品添加到购物篮中时，我会通过切换由v-if监视的Vue变量来显示确认消息： <div class="alert alert-success" v-if="basketAddSuccess" transition="expand">Added to the basket</div> 和JS： addToBasket: function(){ item = this.product; this.$http.post('/api/buy/addToBasket', item); this.basketAddSuccess = true; } （是的，我很快就会在随后的内容中添加它）。 这可以正常工作，并显示消息。但是，我希望该消息在一定时间（例如几秒钟）后再次消失。如何使用Vue做到这一点？我尝试过，setTimeOut但是Vue似乎不喜欢它，说它是不确定的。 编辑：我setTimeout像一个白痴一样拼错。但是，它仍然不起作用： 我的功能现在是： addToBasket: function(){ item = this.photo; this.$http.post('/api/buy/addToBasket', item); this.basketAddSuccess = true; setTimeout(function(){ this.basketAddSuccess = false; }, 2000); }

80 javascript  vue.js 

我正在尝试使用webpack-dev-server来编译文件并启动dev Web服务器。 在我中，package.json我的脚本属性设置为： "scripts": { "dev": "webpack-dev-server --hot --inline", } 因此，--hot和--inline应该启用Web服务器和热重载（据我所知）。 在我的webpack.config.js文件中，设置入口，输出和devServer设置，并添加加载程序以查找.vue文件中的更改： module.exports = { entry: './src/index.js', output: { path: __dirname + '/public', publicPath: '/public', filename: 'bundle.js' }, devtool: 'source-map', devServer:{ contentBase: __dirname + '/public' }, module:{ loaders:[ { test: /\.vue$/, loader: 'vue'} ] } }; 因此，使用此设置，我运行npm run dev。webpack-dev-server启动，模块加载程序测试成功（即，当我保存任何.vue文件时，它将导致webpack重新编译），但是： 浏览器永不刷新 …

79 javascript  webpack  vue.js  webpack-dev-server