小编Sau*_*abh的帖子

我可以在Vue.Js中传递计算属性中的参数

这可以在Vue.Js中传递计算属性中的参数.我可以看到当getter/setter使用computed时,他们可以获取一个参数并将其分配给变量.喜欢这里的文档:

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...
Run Code Online (Sandbox Code Playgroud)

这也是可能的:

// ...
computed: {
  fullName: function (salut) {
      return salut + ' ' + this.firstName + ' ' + this.lastName    
  }
}
// ...
Run Code Online (Sandbox Code Playgroud)

其中computed属性接受一个参数并返回所需的输出.但是,当我尝试这个时,我收到此错误:

vue.common.js:2250未捕获TypeError:fullName不是函数(...)

我应该使用这种方法的方法吗?

javascript vue.js vuejs2

151
推荐指数
7
解决办法
11万
查看次数

Vue v-on:单击对组件不起作用

我正在尝试在组件中使用on click指令,但它似乎不起作用.当我点击组件时,当我在控制台中获得"测试点击"时,会发生无关紧要的事情.我没有在控制台中看到任何错误,所以我不知道我做错了什么.

的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuetest</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

App.vue

<template>
  <div id="app">
    <test v-on:click="testFunction"></test>
  </div>
</template>

<script>
import Test from './components/Test'

export default {
  name: 'app',
  methods: {
    testFunction: function (event) {
      console.log('test clicked')
    }
  },
  components: {
    Test
  }
}
</script>
Run Code Online (Sandbox Code Playgroud)

Test.vue(组件)

<template>
  <div>
    click here
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      msg: 'Welcome to Your …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vue-component vuejs2

136
推荐指数
6
解决办法
9万
查看次数

Vue.js重定向到另一个页面

我想在Vue.js类似于vanilla javascript中进行重定向

window.location.href = 'some_url'
Run Code Online (Sandbox Code Playgroud)

我怎么能在Vue.js中实现这一点?

url-routing vue.js vue-router vuejs2

100
推荐指数
13
解决办法
20万
查看次数

如何在vue.js webpack项目中正确设置favicon.ico?

我用了创建了一个vue webpack项目vue-cli.

vue init webpack myproject
Run Code Online (Sandbox Code Playgroud)

然后在dev模式下运行项目:

npm run dev
Run Code Online (Sandbox Code Playgroud)

我收到了这个错误:

无法加载资源:服务器响应状态为404(未找到)http:// localhost:8080/favicon.ico

所以在webpack里面,如何favicon.ico正确导入?

html favicon ecmascript-6 webpack vue.js

84
推荐指数
4
解决办法
6万
查看次数

什么相当于VueJS中的Angular Service?

我想将所有与服务器通信的函数放入VueJS中并将数据提取到一个可重用的文件中.

插件似乎不是最好的选择.模板较少的组件..?

service vue.js vuejs2

82
推荐指数
4
解决办法
3万
查看次数

如何使用Vue-Router在Vue中设置URL查询参数

我正在尝试在更改输入字段时使用Vue-router设置查询参数,我不想导航到其他页面但只想在同一页面上修改url查询参数,我这样做:

this.$router.replace({ query: { q1: "q1" } })
Run Code Online (Sandbox Code Playgroud)

但这也会刷新页面并将y位置设置为0,即滚动到页面顶部.这是设置URL查询参数的正确方法,还是有更好的方法.


编辑:

这是我的路由器代码:

export default new Router({
  mode: 'history',
  scrollBehavior: (to, from, savedPosition)  => {
    if (to.hash) {
      return {selector: to.hash}
    } else {
      return {x: 0, y: 0}
    }
  },
  routes: [
    ....... 
    { path: '/user/:id', component: UserView },
  ]
})
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vue-router

81
推荐指数
10
解决办法
10万
查看次数

将动态键,值对添加到JavaScript数组或哈希表

我正在尝试将键值对添加到现有的javascript关联数组中.关键需要是一个变量.这适用于JSON编码.我意识到有很多插件和框架,但我想要一个简单的答案.

ary.push({name: val});
Run Code Online (Sandbox Code Playgroud)

where ary是一个新数组,name是一个包含键的变量,val是这个条目的值.

我在jQuery循环中执行此操作,循环遍历表单字段.

javascript json

64
推荐指数
4
解决办法
18万
查看次数

如何从vue.js中的父级访问子方法

我有两个嵌套组件,从父级访问子方法的正确方法是什么?

this.$children[0].myMethod() 似乎做了伎俩,但它很丑,不是吗,有什么更好的方法:

<script>
import child from './my-child'

export default {
  components: {
   child
  },
  mounted () {
    this.$children[0].myMethod()
  }
}
</script>
Run Code Online (Sandbox Code Playgroud)

javascript vue.js

59
推荐指数
5
解决办法
7万
查看次数

如何使用Vuex操作中的vue路由器进行导航

我正在使用Vue 2.x和Vuex 2.x创建一个Web应用程序.我通过http调用从远程位置获取一些信息,我希望如果该调用失败,我应该重定向到其他页面.

GET_PETS: (state) => {
  return $http.get('pets/').then((response)=>{
      state.commit('SET_PETS', response.data)
    })
  },
  error => {this.$router.push({path:"/"}) }
  )
}
Run Code Online (Sandbox Code Playgroud)

但是this.$router.push({path:"/"})给了我以下错误.

未捕获(承诺)TypeError:无法读取未定义的属性'push'

如何实现这一目标.

模拟JsFiddle:在这里

javascript vue.js vuex

54
推荐指数
5
解决办法
4万
查看次数

我可以从Vuex商店中的一个突变调用commit

我有一个vuex商店,如下:

import spreeApi from '../../gateways/spree-api'
// initial state
const state = {
  products: [],
  categories: []
}

// mutations
const mutations = {
 SET_PRODUCTS: (state, response) => {
   state.products = response.data.products
   commit('SET_CATEGORIES')
 },
 SET_CATEGORIES: (state) => {
   state.categories = state.products.map(function(product) { return product.category})
 }

}

const actions = {
 FETCH_PRODUCTS: (state, filters) => {
   return spreeApi.get('products').then(response => state.commit('SET_PRODUCTS', response))
 }
}

export default {
  state,
  mutations,
  actions
}
Run Code Online (Sandbox Code Playgroud)

我想调用变异:SET_CATEGORIES来自变异:SET_PRODUCTS,但这给了我错误:

projectFilter.js:22未捕获(在promise中)ReferenceError:未定义提交(...)

什么应该是正确的方法来做到这一点.我试过store.committhis.commit …

javascript vue.js vuex

53
推荐指数
6
解决办法
4万
查看次数