标签: vuejs2

在v-for循环中显示之前,如何按名称或性别对数组进行排序？ https://jsfiddle.net/rg50h7hx/

<div id="string">
  <ul>
    <li v-for="array in arrays">{{ array.name }}</li>
  </ul>
</div>

// Vue.js v. 2.1.8
var string = new Vue({
  el: '#string',
  data: {
    arrays: [
      { name: 'kano',    sex: 'man' },
      { name: 'striker', sex: 'man' },
      { name: 'sonya',   sex: 'woman' },
      { name: 'sindell', sex: 'woman' },
      { name: 'subzero', sex: 'man' }
    ]
  }
})

我必须使用"计算机",或其他什么？

在Vue 2.0应用程序中,假设我们有组件A,B和C.

声明,注册和使用B.

是否有可能将C从A传递给B？

像这样的东西:

<template>
  <div class="A">
    <B :child_component="C" />
  </div>
</template>

并以某种方式在B中使用C.

<template>
  <div class="B">
    <C>Something else</C>
  </div>
</template>

动机:我想创建一个通用组件B,用于A但从A其子级接收C.实际上A会B多次使用不同的'C'来表示它.

如果这种方法不正确,在Vue中这样做的正确方法是什么？

回答@Saurabh

而不是作为道具传递,我尝试了B.内部的建议.

<!-- this is where I Call the dynamic component in B -->

<component :is="child_component"></component>

//this is what I did in B js
components: {
 equip: Equipment
}, 
data () {
 return {
   child_component: 'equip',
   _list: []
 }
}

基本上我试图渲染设备,但动态的方式

我在控制台和空白页面中收到3个错误

[Vue警告]:在/home/victor/projetos/tokaai/public/src/components/EquipmentFormItem.vue中渲染组件时出错:

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

TypeError:无法读取undefined的属性'setAttribute' …

我正在构建一个小应用程序,Vuejs 2.0我有大约15个迭代元素,我想限制v-for只有5个元素,并且可以有更多的按钮来显示整个列表.有可能吗？

几天来,我一直在为单页面应用程序寻找安全的身份验证和会话管理机制.从有关SPA和身份验证的众多教程和博客文章来看,将JWT存储在localStorage或常规cookie中似乎是最常用的方法,但将JWT用于会话并不是一个好主意因此它不是这个应用程序的选项.

要求

• 登录应该是可以撤销的.例如,如果在用户的帐户上检测到可疑活动,则应该可以立即撤消该用户的访问权限并需要新登录.同样,密码重置等操作应撤消所有现有登录.
• 身份验证应该通过Ajax进行.之后不应该进行浏览器重定向("硬"重定向).所有导航都应该在SPA内部进行.
• 一切都应该跨域工作.SPA将在www.domain1.com上,服务器将在www.domain2.com上.
• JavaScript应该无权访问服务器发送的敏感数据,例如会话ID.这是为了防止XSS攻击,其中恶意脚本可以从常规cookie,localStorage或sessionStorage中窃取令牌或会话ID.

理想的机制似乎是使用HttpOnly包含会话ID的cookie进行基于cookie的身份验证.流程将如下工作:

1. 用户到达登录页面并提交其用户名和密码.
2. 服务器对用户进行身份验证,并将会话ID作为HttpOnly响应cookie 发送.
3. 然后,SPA在随后向服务器发出的XHR请求中包含此cookie.这似乎可以使用该withCredentials选项.
4. 当向受保护的端点发出请求时,服务器会查找cookie.如果找到,它会将该会话ID与数据库表进行交叉检查,以确保会话仍然有效.
5. 当用户注销时,会话将从数据库中删除.下次用户到达站点时,SPA会收到401/403响应(因为会话已过期),然后将用户带到登录屏幕.

因为cookie具有HttpOnly标志,JavaScript将无法读取其内容,因此只要通过HTTPS传输,它就不会受到攻击.

挑战

这是我遇到的具体问题.我的服务器配置为处理CORS请求.在对用户进行身份验证后,它会在响应中正确发送cookie:

HTTP/1.1 200 OK
server: Cowboy
date: Wed, 15 Mar 2017 22:35:46 GMT
content-length: 59
set-cookie: _myapp_key=SFMyNTYBbQAAABBn; path=/; HttpOnly
content-type: application/json; charset=utf-8
cache-control: max-age=0, private, must-revalidate
x-request-id: qi2q2rtt7mpi9u9c703tp7idmfg4qs6o
access-control-allow-origin: http://localhost:8080
access-control-expose-headers: 
access-control-allow-credentials: true
vary: Origin

但是,浏览器不保存cookie(当我检查Chrome的本地cookie时,它不存在).因此,当以下代码运行时:

context.axios.post(LOGIN_URL, creds).then(response => {
  context.$router.push("/api/account")
}

并创建帐户页面:

created() {
  this.axios.get(SERVER_URL + "/api/account/", {withCredentials: true}).then(response => {
    //do stuff
  } …

我正在学习Vue并在计算属性中使用箭头函数时遇到问题.

我的原始代码工作正常(请参阅下面的代码段).

new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  computed:{
  	switchRed: function () {
    	return {red: this.turnRed}
    },
    switchGreen: function () {
    	return {green: this.turnGreen}
    },
    switchBlue: function () {
    	return {blue: this.turnBlue}
    }
  }
});

.demo{
  width: 100px;
  height: 100px;
  background-color: gray;
  display: inline-block;
  margin: 10px;
}
.red{
  background-color: red;
}
.green{
  background-color: green;
}
.blue{
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script>
<div id="app">
  <div class="demo" @click="turnRed = !turnRed" :class="switchRed"></div>
  <div class="demo" @click="turnGreen = …

(请参阅结尾为什么这不是一个骗局我如何在另一个JavaScript文件中包含JavaScript文件？)

Javascipt + Vue + webpack + vue-loader noob ...在最简单的事情上磕磕绊绊!

我有App.vue一个模板:

<template>
 <div id="app">
     <login v-if="isTokenAvailable()"></login>
 </div>
</template>

我isTokenAvailable以正常方式为Vue 声明了该方法methods.它使用我在单独js文件中编写的函数:

<script>
import * as mylib from './mylib';

export default {
  ....
    methods:{
        isTokenAvailable: () => {
            return mylib.myfunc();
        }
    }
}
</script>

mylib 像这样开始:

import models from './model/models'
import axois from 'axios'

export default function() {
    // functions and constants
}

当我运行项目时,我收到警告:

export 'myfunc' (imported as 'mylib') was not found …

我想听听Vue组件中的窗口滚动事件.这是我到目前为止尝试的内容:

<my-component v-on:scroll="scrollFunction">
    ...
</my-component>

随着scrollFunction(event)正在我的组件方法来定义,但它似乎并没有工作.

任何人都知道如何做到这一点？

谢谢!

Netbeans 8.x intellisense不识别VueJS标签.在Netbeans 8.x中是否有可用于VueJs语法高亮或自动填充支持的插件？如果没有,有什么工作吗？

我在vuex商店的州很大.

有没有办法一次性重置状态中的所有数据,而不是手动将所有数据设置为null？

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

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

谢谢!