标签: vue-resource

我正在使用对我的数据库的调用来检索一些结果并将它们推送到数组上.但是,当我console.log(this.activeBeers)没有得到一个数组而是一个对象.如何获取普通数组而不是对象？

Vue.component('beers', {
    template: '#beers-template',

    data: function() {
        return {
            activeBeers: []
        }
    },

    ready: function() {
        function getActiveBeers(array, ajax) {
            ajax.get('/getbeers/' + $('input#bar-id').val()).then(function (response) {
                $.each(response.data, function(key, value) {
                    array.push(value.id);
                });
            }, function (response) {
                console.log('error getting beers from the pivot table');
            });

            return array;
        }

        console.log(this.activeBeers = getActiveBeers(this.activeBeers, this.$http));
    },

    props: ['beers']
});

我正在尝试在Vue.js中创建一个简单的插件来包装vue-resource插件以跟踪请求的状态.

function State() {}

State.prototype.post = function (ctx, name, url, data, successCB, errorCB) {
    var options = {};

    if (errorCB) {
        options.error = function (resp) {
            ctx[name] = 'error';

            return errorCB(resp);
        };
    }

    ctx[name] = 'sending';

    ctx.$http.post(url, data, function (res, code, req) {
        ctx[name] = 'sent';

        return successCB(res, code, req);
    }, options);
};

function install(Vue) {
    Object.defineProperties(Vue.prototype, {
        $state: {
            get: function () {
                return new State;
                // return Vue.state.bind({$vm: this});
            }
        }
    });
}

module.exports = install; …

我使用SLIM微型框架构建了一个API。我安装了一些使用以下代码添加CORS标头的中间件。

class Cors{

    public function __invoke(Request $request, Response $response, $next){

        $response = $next($request, $response);
        return $response
            ->withHeader('Access-Control-Allow-Origin', 'http://mysite')
            ->withHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Accept, Origin, Authorization')
            ->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    }

}

对于我的前端，我使用了VueJS。我设置了VueResource并使用以下代码创建了一个函数。

register (context, email, password) {
  Vue.http({
    url: 'api/auth/register',
    method: 'POST',
    data: {
    email: email,
    password: password
  }
}).then(response => {
  context.success = true
}, response => {
  context.response = response.data
  context.error = true
})
}

在chrome中，以下错误会记录到控制台。

XMLHttpRequest cannot load http://mysite:9800/api/auth/register. Response to preflight request doesn't pass access …

我敢肯定，这对你们来说将会非常容易。我正在尝试使帖子的标题始终保持可见的简单列表，并且当您单击列表中的特定帖子时，您将获得帖子的正文。我为此使用了v-show。但是，当我单击特定帖子时，所有帖子的正文都会出现，而不仅仅是我单击的内容。

这是模板：

<template>
<div class="container">
    <h1>My Posts</h1>
    <ul class="list-group">
        <li class="list-group-item" v-for="post in list">
            <div @click="changeShow">
                <h4>{{ post.title }}</h4>
                <p v-show="show">{{ post.body }}</p>
                <span v-show="show" class="label label-primary">ID: {{ post.userId }}</span>
            </div>
        </li>
    </ul>

</div>

逻辑：

<script>

export default{

    data(){
        return{
            msg:'hello vue',
            list: [],
            show: false
        }
    },
    ready(){
        this.fetchPostList();
    },

    methods:{
        fetchPostList: function () {
            var root = 'http://jsonplaceholder.typicode.com';
            this.$http.get(root + '/posts').then(function (response) {
                this.list = response.data;
            })
        },
        changeShow: function () {
            this.show = !this.show;
        }
    }

}

我开始使用Typescript并尝试将其应用于我的项目。但是，我无法像vue-resource那样使用Vue.js插件。

当我使用

this.$http.post()

我得到错误：

错误TS2339：类型'typeof Vue'上不存在属性'$ http'。

这很有意义，因为我处于课堂环境中。但是我该怎么办呢？这是我的全部内容：

<template>
<div>
  <h1>Sign up</h1>

  <form>
    <div class="form-group">
      <label for="name">Name</label>
      <input v-model="name" type="text" class="form-control" name="name" placeholder="Name">
      <small class="form-text text-muted">Please provide a name.</small>
    </div>
    <div class="form-group">
      <label for="name">Password</label>
      <input v-model="password" type="password" class="form-control" name="password" placeholder="Password">
      <small class="form-text text-muted">Please provide a password.</small>
    </div>
    <input type="submit" class="btn btn-primary" value="Submit" @click.prevent="save">
  </form>
</div>
</template>

<script lang="ts">
import Component from 'vue-class-component'

@Component
export default class SignUp extends Vue {
  name: string = ''
  password: string = ''

  save(): void …

我有数据：1,2,3,4,4,5＆我的代码是这样的：

<div id="looping" v-for="display in editlistAssesments">
  {{display.test_id}}
</div>

我的代码如果在php这样的

$temp_id = array();
foreach($data as $data){
  if(in_array($data ->test_id,$temp_id)){
    echo" 1: no";
    echo" 2: no";
    echo" 3: no";
    echo" 4: yes"; //because he have same value 
    echo" 5: no";
    $temp_id[] = $data ->test_id;
  }
}

我如何在循环vueJs中做到这一点？

我正在制作一种游戏,我希望用户输入一个特定的单词,然后我想检查是否按下了特定的单词.如果单词被按下,我将获取下一个单词.目前我正在使用表单并使用了如下所示的v-model:

 <input v-model="inputSpell">

在Vue实例中,我使用了watch属性,该属性不断检查输入的单词是否与被询问的单词匹配.

watch : {

    inputSpell : function() {
        var spellCount = this.spellCount;
        var inputSpell = this.inputSpell.toUpperCase();
        var presentSpell = this.presentSpell;

        console.log("Spell Count " + spellCount);
        console.log("Input Spell " + inputSpell);
        console.log("Present Spell" + presentSpell);

        if (inputSpell.length === 3 && inputSpell === presentSpell) {
            this.$set(this, 'inputSpell', '');
            if (spellCount === 3) {
                return this.completeCombo();
            }
            return this.fetchSpell(spellCount);
        }

        if (inputSpell.length >=3) {
            this.$set(this, 'inputSpell', '');
        }
    }
}

我想到了三个想法:

1. 上面我正在做的是显示表格.用户输入该表单中的单词.看起来不太好看.

2. 在加载游戏时,使输入元素隐藏并专注于它.但缺点是如果用户点击页面上的任何地方,表单上的焦点将会丢失.

3. 制作自定义指令或调用捕获按键事件以检查单词的方法.

任何帮助将不胜感激.

谢谢.

在通过ajax获取之后,如何动态创建routes数组？

有没有办法在初始化后添加/推送新路由到路由器？

这不起作用:

new Vue({
  el: '#app',
  template: '<App/>',
  data: {
    content: []
  },
  created: function () {
    this.$http.get('dummyjsondatafornow').then((response) => {

      // this doesn't work when creating the VueRouter() outside the Vue instance, as in the docs.
      // this.$router.options.routes.push({ path: '/about', component: About })

      let routes = [
        { path: '/about', component: About }
      ]

      // this doesn't work either
      this.router = new VueRouter({
        routes: routes
      })
    })
  },
  // router: router,
  components: { App }
})

我有一个应用程序,其中Vue前端与服务器位于不同的域.具体来说,Vue位于,localhost:8080服务器位于localhost:4000.

在成功登录期间,服务器使用具有会话密钥的HttpOnly cookie进行响应.这是回复:

HTTP/1.1 200 OK
server: Cowboy
date: Wed, 15 Mar 2017 22:35:46 GMT
content-length: 59
set-cookie: _myapp_key=SFMyNTY.g3QAAAABbQAAABBndWFyZGlhbl9kZWZhdWx0bQAAAUNleUpoYkdjaU9pSklVelV4TWlJc0luUjVjQ0k2SWtwWFZDSjkuZXlKaGRXUWlPaUpWYzJWeU9qSWlMQ0psZUhBaU9qRTBPVEl5TURrek5EY3NJbWxoZENJNk1UUTRPVFl4TnpNME55d2lhWE56SWpvaVFYTndhWEpsSWl3aWFuUnBJam9pWWpreU5tVmpZek10TVRrM1lTMDBPREkyTFRrek5tSXRaRGxsTURneE5UUTNZVEpsSWl3aWNHVnRJanA3ZlN3aWMzVmlJam9pVlhObGNqb3lJaXdpZEhsd0lqb2lZV05qWlhOekluMC43THdySDUxb1hVVFR3OEhYMzBPWDJTeTd0Si05RTFFZEpQV3ZDLS1WU3YycllpZ29aTUY4NkhUMzB6Q29SWXFBajlxYXFQc0dqTzNNNFJyOHYyY1ZGZw.2k1A4HuW6VV8ACZhgHY6Szuf5gXKAe_QwMCN3doi9D4; 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

但是,使用Vue Resource进行的后续请求不会将此cookie发送回服务器,即使我包含以下credentials: true选项:

this.$http.get("http://localhost:4000/api/account/", {credentials: true}).then(response => {
  //do stuff
}, response => {
  console.log(response.body.error)
})

我知道凭据不包括在内,因为我可以在Chrome中看到请求标头:

GET /api/account/ HTTP/1.1
Host: localhost:4000
Connection: keep-alive
Accept: application/json
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 …

在我使用Vue在前端循环数据后,我能够显示图像,但我不知道如何下载它.我希望能够单击图像或其他按钮下载图像.

<ul>
   <li v-for="data in mydata" :key="data.id">
      <img :src= "data.url" alt="image" class="img-thumbnail"/>
    </li>
</ul>