小编Amr*_*pal的帖子

我的组件vue是这样的:

<template>
    <select class="form-control" v-model="selected" :required @change="changeLocation">
        <option :selected>Choose Province</option>
        <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
    </select>
</template>

我用这个:<option :selected>Choose Province</option>选中

但是当执行时,在gulp watch上存在错误

像这样的错误:

错误在./~/vue-loader/lib/template-compiler.js?id=data-v-53777228!./~/vue-load er/lib/selector.js？type = template&index = 0!./ resources/assets/js/components/bootst rap/LocationBsSelect.vue模块构建失败:SyntaxError:意外的令牌(28:4)

似乎我的步骤是错误的

我该如何解决？

在我从组件的脚本中获取电影细节之前.该功能首先检查商店的电影ID是否与路线的参数电影ID相同.如果相同则不从服务器API获取电影,否则从服务器API获取电影.

它工作正常.但现在我正试图从商店的变异中获取电影细节.但是我收到了错误

未捕获的TypeError:无法读取未定义的属性'$ route'

如何使用vue-router ($route)访问params和vue-resource ($http)以从vuex存储中的服务器API获取？

store.js:

export default new Vuex.Store({
    state: {
        movieDetail: {},
    },
    mutations: {
        checkMovieStore(state) {
            const routerMovieId = this.$route.params.movieId;
            const storeMovieId = state.movieDetail.movie_id;
            if (routerMovieId != storeMovieId) {
                let url = "http://dev.site.com/api/movies/movie-list/" + routerMovieId + "/";
                this.$http.get(url)
                    .then((response) => {
                        state.movieDetail = response.data;
                    })
                    .catch((response) => {
                        console.log(response)
                    });
            }
        },
    },
});

组件脚本:

export default {
    computed: {
        movie() {
            return this.$store.state.movieDetail;
        }
    },
    created: function () {
        this.$store.commit('checkMovieStore');
    },
}

根据文档，

<input v-model="something"> 是相同的：

<input
 v-bind:value="something"
 v-on:input="something = $event.target.value">

所以我尝试了以下并且它有效：

<input v-model='sample'>
<input v-bind:value='sample' v-on:input="sample = $event.target.value" >    

现在，当我在自定义组件中尝试相同的操作时，它会触发一个错误：

VM99:2Uncaught TypeError: 无法读取未定义的属性“值”

jsFiddle在这里

我在这里缺少什么才能使它工作？谢谢。

我有两个小提琴:A,B(使用Vuejs 2.2.4)

我有一个计算属性,可以通过编程方式更改(我正在使用get和set方法).

期望:

1. 如果默认参数changes(this.message),则计算的property(computedMessage)必须更改(默认行为).

2. 如果辅助参数更改(this.messageProxy),则只有计算属性必须反映辅助参数.

小提琴A按预期工作但小提琴B没有.

错误:辅助参数更改后,默认行为(第1点)停止.

fiddles之间的唯一区别是console计算属性中的语句.

背景:我试图以computed编程方式设置属性.该computed属性设置如下:

computedMessage: {
  get () {
    let messageProxy = this.messageProxy
    this.messageProxy = null
    console.log(messageProxy, this.messageProxy, this.message)
    return messageProxy || this.message
  },
  set (val) {
    this.messageProxy = val
  }
}

这允许我设置computedMessagelike 的值:

this.computedMessage = 'some string'

如果这些行:

get () {
  let messageProxy = this.messageProxy
  this.messageProxy = null …

假设是/loginAPI 的情况,对于匹配的一组凭证,应该返回集合中的用户对象,哪种方法会更高效:

1)一个带投影查询的模型:

var UserSchema = new Schema({
  name        : String,
  email       : String,
  dob         : Number,
  phone       : Number,
  gender      : String,
  location    : Object, // GeoJSON format {type: 'Point', geometry: { lat: '23.00', lng: '102.23' }}
  followers   : [UserSchema],
  following   : [UserSchema],
  posts       : [PostSchema],
  groups      : [GroupSchema]
  // ... and so on
});

2)拆分模型:

var UserMinimalSchema = new Schema({
  name        : String,
  email       : String,
  phone       : Number,
  location    : Object, 
});

var UserDetailSchema = …

contextmenu通过事件处理程序禁用

我试图禁用右键单击元素.我发现了一个像这样的解决方案:

<div oncontextmenu='return false'></div>

但是因为在html中使用事件处理程序不是一个好习惯,所以我尝试了类似的东西:

<div id='test'></div>

并在代码的js部分:

let test = document.getElementById('test')

test.addEventListener('contextmenu', (e) => {
  console.log('right click!')
  return false
})

let test2 = document.getElementById('test2')

test2.addEventListener('contextmenu', (e) => {
  console.log('right click!')
  return false
})

div {
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#test1 {
  background-color: red;
}

#test2 {
  background-color: blue;
}

<div id='test1' oncontextmenu='return false'></div>
<div id='test2'></div>

右键单击test1将成功禁用,但不会打开test2,控制台会证明程序控件确实已到达处理程序.

我不是在寻找解决方法

<div id='test'></div>

let test = document.getElementById('test')

test.addEventListener('contextmenu', (e) => {
  e.preventDefault() …

这是我的第一次单元测试,我收到的错误消息无法找到为什么我到目前为止在论坛中得到它.

这是我的单元测试:

import LoginPage from 'src/pages/Login'

describe('Login.vue', () => {
it('mounted is a fuction', () => {
    expect(typeof LoginPage.mounted).toBe('function')
})
})

这是登录页面:

<template>
<div class="">
    <p v-if="$route.query.redirect">
       You need to login first.
    </p>
    <form class="column is-one-third is-offset-one-third" @submit.prevent="login">
    <div class="control">
        <input type="email" placeholder="email" v-model="email" class="input">
    </div>
    <div class="control">
        <input type="password" autocomplete="off" placeholder="password" v-model="pass" class="input">
    </div>
    <div class="control">
        <button class="button is-primary" type="submit">Login</button>
        <a class="button" href="/signup">Sign up</button>
    </div>
    <p v-if="error" class="help is-danger">{{ error }}</p>
</form>
</div>
</template>
<script>
export default {
props: …

我已经开始玩了,Vue但在尝试使用时将数据传递给组件时遇到了问题props.在下面的代码this.myData(在Hello.vue)中是undefined出于某种原因

App.vue

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

export default {
  name: 'app',
  data() {
    return {
      myData: 'this is my data'
    }
  },
  components: {
    Hello
  } ...
 </script>

Hello.vue

<script>
export default {
  name: 'hello',
  props: ['myData'],
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
  mounted: function() {
       console.log(this.myData)
   }
} ...
</script>