ruby-on-rails – Vue.JS和Rails-UJS / Jquery-UJS冲突 – Vuex突变不起作用

分类：Ruby作者：编程之家用户
我正在遵循一个简单的教程,我出于某种原因,我的2个视图突变(addCard和addList)正常工作……但是,我的第3个突变(editCard)似乎在Vue中不起作用.当我点击卡片时,会弹出一个停留位置,您可以在其中编辑名称…保存后,它会正确保存在轨道中,但不会立即在浏览器中更新.您必须先刷新页面才能看到更改.我最初认为这是与Vuex和Rails-ujs的冲突,但为什么2个突变不起作用而第3个不起作用？感谢Vue专家的帮助……

应用程序/ JavaScript的/ app.vue

<template>
  <div id="app" class="row">

    <div class="col-12">

      <!-- Button trigger modal -->
      <button type="button" data-toggle="modal" data-target="#exampleModal">New List</button>

      <!-- Bootstrap Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">

              <textarea ref="message" v-model="message" class="form-control mb-1">
              </textarea>

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button v-on:click="createList" class="btn btn-secondary">Add</button>
            </div>
          </div>
        </div>
      </div>

    </div><br/><br/>

    <hr /><hr />

    <div class="col-2">
      <div class="list">
        <a v-if="!editing" v-on:click="startEditing">
          <h1 style="padding: 20px 20px;">
            <span style="font-style: italic;">+ Add a List</span>
          </h1>
        </a>
        <textarea v-if="editing" ref="message" v-model="message" class="form-control mb-1">
        </textarea>
        <button v-if="editing" v-on:click="createList" class="btn btn-secondary">Add</button>
        <a v-if="editing" v-on:click="editing=false">cancel</a>
      </div>
    </div>

    <list v-for="(list,index) in lists" :list="list"></list>

  </div>
</template>

<script>
import list from 'components/list'
export default {
  components: { list },data: function() {
    return {
      editing: false,message: "",}
  },computed: {
    lists: {
      get() {
        return this.$store.state.lists;
      },set(value) {
        this.$store.state.lists = value
      },},methods: {
    startEditing: function () {
      this.editing = true
      this.$nextTick(() => { this.$refs.message.focus() })
    },createList: function() {
      var data = new FormData // -> {}
      data.append("list[name]",this.message)// -> { "list[name]" => this.message }
      Rails.ajax({
        url: "/lists",type: "POST",data: data,dataType: "json",beforeSend: () => true,// 2xx,3xx (SUCCESS),4xx,5xx (ERROR)
        success: (data) => {
          this.$store.commit('addList',data)
          this.message = ""
          this.editing = false
          $('#exampleModal').modal('hide');
            return false;
        }
      });
    }
  }
}
</script>

<style scoped>
.list {
  background-color: #e2e4e6;
  padding: 8px;
  border-radius: 3px;
  margin-bottom: 8px;
}
.card {

}
p {
  font-size: 2em;
  text-align: center;
}
</style>

应用程序/ JavaScript的/包/的application.js

import Vue from 'vue/dist/vue.esm'
import Vuex from 'vuex'

// import BootstrapVue from 'bootstrap-vue' || These are for bootstrap vue removing for now
import App from'../app.vue'
import TurbolinksAdapter from 'vue-turbolinks'

// import 'bootstrap/dist/css/bootstrap.css'; || These are for bootstrap vue removing for now
// import 'bootstrap-vue/dist/bootstrap-vue.css'; || These are for bootstrap vue removing for now

// Vue.use(BootstrapVue); || These are for bootstrap vue removing for now

Vue.use(Vuex)
Vue.use(TurbolinksAdapter)

window.store = new Vuex.Store({
    state: {
        lists: []
    },mutations: {
        addList(state,data) {
            state.lists.unshift(data)
        },addCard(state,data) {
            const index = state.lists.findIndex(item => item.id == data.list_id)
        state.lists[index].cards.push(data)
        },editCard(state,data) {
            const list_index = state.lists.findIndex((item) => item.id == data.list_id)
            const card_index = state.lists[list_index].cards.findIndex((item) => item.id == data.id)
            state.lists[list_index].cards.splice(card_index,1,data)
        },}
})

document.addEventListener("turbolinks:load",function() {
    var element = document.querySelector("#boards")
    if (element != undefined) {

        window.store.state.lists = JSON.parse(element.dataset.lists)

        const app = new Vue({
            el: element,store: window.store,template: "<App />",components: { App }
        })
    }
});

应用程序/ JavaScript的/组件/ card.vue

<template>
         <div>
        <div @click="editing=true" class="card card-body mb-3">
          {{card.name}}
        </div>

        <div v-if='editing' class="modal-backdrop show"></div>

        <div v-if='editing' @click="closeModal" class="modal show" style="display: block">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">{{ card.name }}</h5>
              </div>
              <div class="modal-body">
                <input v-model="name" class="form-control"></input>
              </div>
              <div class="modal-footer">
                <button @click="save" type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>

    <script>
    export default {
        props: ['card','list'],data: function () {
            return {
                editing: false,name: this.card.name,}
        },methods: {
            closeModal: function(event) {
                if (event.target.classList.contains("modal")) {
                    this.editing = false
                }
            },save: function() {
                var data = new FormData
                data.append("card[name]",this.name)
                Rails.ajax({
                    url: `/cards/${this.card.id}`,type: "PATCH",beforeSend: function() { return true },success: (data) => {
                        this.$store.commit('editCard',data)
                        this.editing = false
                    }
                })
            },}
    }
    </script>

    <style scoped>
    </style>

应用程序/ JavaScript的/组件/ list.vue

<template>
    <div class="col-2">

    <div class="list">
      <h6>{{ list.name }}</h6>

      <card v-for="card in list.cards" :card="card" :list="list"></card>

      <div class="card card-body">

        <a v-if="!editing" v-on:click="startEditing">Add a Card</a>

        <textarea v-if="editing" ref="message" v-model="message" class="form-control mb-1"></textarea>
        <button v-if="editing" v-on:click="createCard" class="btn btn-secondary">Add</button>

        <a v-if="editing" v-on:click="editing=false">cancel</a>

      </div>
    </div>

  </div>
</template>

<script>
import card from 'components/card'
export default {
    components: { card },props: ["list"],data: function () {
        return {
            editing: false,message: ""
        }
    },methods: {
        startEditing: function () {
            this.editing = true
            this.$nextTick(() => { this.$refs.message.focus() })
        },createCard: function() {
        var data = new FormData
        data.append("card[list_id]",this.list.id)
        data.append("card[name]",this.message)
        Rails.ajax({
            url: "/cards",success: (data) => {
          this.$store.commit('addCard',data)
                this.message = ""
                this.$nextTick(() => { this.$refs.message.focus() })
            }
        });
    }
    }
}
</script>

<style scoped>
.list {
  background-color: #e2e4e6;
  padding: 8px;
  border-radius: 3px;
  margin-bottom: 8px;
}
.btn.btn-secondary {
  width: 75px;
}
</style>

更新：我在编辑和编辑时根据要求更新了控制台和终端日志.保存一张卡片.

终端日志：

Started GET "/lists/" for 127.0.0.1 at 2018-04-24 21:51:47 -0500
Processing by ListsController#index as HTML
  Rendering lists/index.html.erb within layouts/application
  List Load (11.3ms)  SELECT "lists".* FROM "lists" ORDER BY "lists"."position" DESC
  Card Load (0.1ms)  SELECT "cards".* FROM "cards" WHERE "cards"."list_id" = ? ORDER BY "cards"."position" ASC  [["list_id",235]]
  Card Load (0.1ms)  SELECT "cards".* FROM "cards" WHERE "cards"."list_id" = ? ORDER BY "cards"."position" ASC  [["list_id",234]]
  Card Load (0.1ms)  SELECT "cards".* FROM "cards" WHERE "cards"."list_id" = ? ORDER BY "cards"."position" ASC  [["list_id",233]]
  Card Load (0.1ms)  SELECT "cards".* FROM "cards" WHERE "cards"."list_id" = ? ORDER BY "cards"."position" ASC  [["list_id",232]]
  Card Load (0.1ms)  SELECT "cards".* FROM "cards" WHERE "cards"."list_id" = ? ORDER BY "cards"."position" ASC  [["list_id",231]]
  Rendered lists/index.html.erb within layouts/application (17.8ms)
  Rendered shared/_head.html.erb (203.0ms)
  Rendered shared/_navbar.html.erb (0.6ms)
  Rendered shared/_notices.html.erb (0.3ms)
Completed 200 OK in 370ms (Views: 346.5ms | ActiveRecord: 11.9ms)


Started PATCH "/cards/106" for 127.0.0.1 at 2018-04-24 21:51:59 -0500
Processing by CardsController#update as JSON
  Parameters: {"card"=>{"name"=>"Card C30006"},"id"=>"106"}
  Card Load (0.2ms)  SELECT  "cards".* FROM "cards" WHERE "cards"."id" = ? LIMIT ?  [["id",106],["LIMIT",1]]
   (0.0ms)  begin transaction
  List Load (0.1ms)  SELECT  "lists".* FROM "lists" WHERE "lists"."id" = ? LIMIT ?  [["id",231],1]]
  SQL (0.2ms)  UPDATE "cards" SET "name" = ?,"updated_at" = ? WHERE "cards"."id" = ?  [["name","Card C30006"],["updated_at","2018-04-25 02:51:59.753283"],["id",106]]
   (1.7ms)  commit transaction
  Rendering cards/show.json.jbuilder
  Rendered cards/_card.json.jbuilder (0.6ms)
  Rendered cards/show.json.jbuilder (2.5ms)
Completed 200 OK in 28ms (Views: 21.7ms | ActiveRecord: 2.2ms)

浏览器控制台

{id: 106,list_id: 231,name: "Card C30006",position: 3,created_at: "2018-04-24T20:39:06.150Z",…}
created_at:(...)
id:(...)
list_id:(...)
name:(...)
position:(...)
updated_at:(...)
url:(...)
__ob__:Observer
dep:Dep {id: 86,subs: Array(0)}
value:{…}
vmCount:0
__proto__:Object
get created_at:ƒ reactiveGetter()
set created_at:ƒ reactiveSetter(newVal)
get id:ƒ reactiveGetter()
set id:ƒ reactiveSetter(newVal)
get list_id:ƒ reactiveGetter()
set list_id:ƒ reactiveSetter(newVal)
get name:ƒ reactiveGetter()
set name:ƒ reactiveSetter(newVal)
get position:ƒ reactiveGetter()
set position:ƒ reactiveSetter(newVal)
get updated_at:ƒ reactiveGetter()
set updated_at:ƒ reactiveSetter(newVal)
get url:ƒ reactiveGetter()
set url:ƒ reactiveSetter(newVal)
__proto__:Object

更新2 :(添加Vuex面板输出)

解决方法

Vue对可以自动检测的数据更新有一些警告： https://vuejs.org/v2/guide/list.html#Caveats

此外,反应性规则有一些信息：https://vuex.vuejs.org/en/mutations.html#mutations-follow-vues-reactivity-rules

我认为,警惕页面实际上反映了你的情况.引：

Due to limitations in JavaScript,Vue cannot detect the following changes to an array:

When you directly set an item with the index,e.g. vm.items[indexOfItem] = newValue
When you modify the length of the array,e.g. vm.items.length = newLength

To overcome caveat 1,both of the following will accomplish the same as vm.items[indexOfItem] = newValue,but will also trigger state updates in the reactivity system:

// Vue.set Vue.set(vm.items,indexOfItem,newValue)

// Array.prototype.splice vm.items.splice(indexOfItem,newValue)

基于此,我会尝试将您的代码更新为：

editCard(state,data) {
            const list_index = state.lists.findIndex((item) => item.id == data.list_id)
            const card_index = state.lists[list_index].cards.findIndex((item) => item.id == data.id)
            var updata = state.lists[list_index].cards[card_index] =  data;
            state.lists.splice(list_index,updata);

将接头移动到列表的顶层现在应该触发更新.

请注意,如果您有反馈,我将很乐意适当更新此答案.

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

ruby on rails validates
validates:conclusion,:presence=>true,:inclusion=>{:in=>[0,1]}validates:email,:presence=>true,:length=>{:minimum=>3,:maximum=>254},:uniqueness=>true,:email=>truevalidates:ending_order,
redis 集群搭建
一、redis集群搭建redis3.0以前，提供了Sentinel工具来监控各Master的状态，如果Master异常，则会做主从切换，将Slave作为master，将master做为slave。其配置也较复杂，且表现一般。redis3.0以后已经支持集群容错功能，并且非常简单1.1素材准备centos7（集群搭建，至少三个master。需
如何让ruby中的ri起作用
分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow                 不知道大家是否注意到，全新安装ruby之后，无论是在windows或是linux还是macosX下使用rix
ruby方法名之命名方式
上一篇博文 ruby传参之引用类型 里边定义了一个方法名 modify_my_object!，这个方法名是以!结尾，在ruby的对象里边是用于表达修改本身的意思。比如String#gsub，返回的是一个新的字符串对象；而String#gsub!，返回的是自身已经被修改的对象。不止!这样的特殊字符可以命名，ruby
python入门
一编程与编程语言 什么是编程语言？ 能够被计算机所识别的表达方式即编程语言,语言是沟通的介质，而编程语言是程序员与计算机沟通的介质。 什么是编程？ 编程即程序员根据需求把自己的思想流程按照某种编程语言的语法风格编写下来，产出的结果就是包含一堆字符的文件。二编程语言分
雷林鹏分享：Ruby 类和对象
Ruby类和对象Ruby是一种完美的面向对象编程语言。面向对象编程语言的特性包括：数据封装数据抽象多态性继承这些特性将在面向对象的Ruby中进行讨论。一个面向对象的程序，涉及到的类和对象。类是个别对象创建的蓝图。在面向对象的术语中，您
极客时间
1.ruby的标签<ruby>漢<rp>(<p><rt>han<t><rp>)<p>字<rp>(<p><rt>zi<t><rp>)<p><uby> 
Redis安装及单机集群搭建总结(多节点搭建集群和单机集群大同小异)
1、软件安装1.安装包是个压缩包-->解压到/homeedis_tar下命令如下： tar-zxvf./../-C/homeedis_tar2.安装c++环境yum-yinstallgcc-c++（注：redis底层源码是c++）3.解压后需要源码编译进入到redis-3.0.0后执行make4.编译完后开始安装需要指定一个安装路径
sass(scss的安装
1.sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）window下安装SASS首先需要安装Ruby，先从官网下载Ruby并安装。安装过程中请注意勾选AddRubyexecutablestoyourPATH添加到系统环境变量。ruby官网：https:/ubyinstaller.org/downloa
从0使用Ruby on Rails打造企业级RESTful API项目实战之我的云音乐
本节对我们项目实现的功能和知识点做一个简单的介绍，因为是RESTfulAPI项目，所以对于后端来说基本上没有什么UI界面可展示，那我们就在关键的点，使用客户端（Android）实现的效果图。课程简介这是一门企业级项目实战课程，目的是从0使用Rails开发一个企业级RESTfulAPI项目；他不能让你年薪30
redis 集群搭建
注意点：1.redis集群至少需要6个节点。2.redis集群至少部署在3台服务器上。3.redis的版本需要在3.0以上。4.需要ruby的支持。步骤：1.安装依赖环境：yuminstallgcc-c++2.下载ruby-2.4.6，编译安装https://cache.ruby-lang.org/pububy/2.4uby-2.4.6.tar.gztarzxf ruby-2.4.6.
ruby – sleep 0有特殊意义吗？
在我的客户项目中,我看到很多睡眠用法0.代码看起来像这样.whiletrue......sleep0end通过阅读SO的一些答案,如this,似乎睡眠0具有一定的意义.我现在想知道的是,在时间片0期间调度其他线程运行(如果它们正在等待运行)是像ruby或python这样的langVM的工作,或者它
Day11 - Ruby的block，proc，lamdba方法比较
前情提要：第11天开始，要更深入Ruby的精髓！Ruby经典面试题目#11Ruby的block，proc，lamdba方法比较？What’sdifferencebetweenblocks，procsandlambdas？block代码内存块代码内存块是用do…end围起来，围出特定一个区域、放代码的地方。就好像跑马拉松一样，道路上会进行交通管制，把参赛者
Linux中Redis集群离线版安装步骤
安装环境及工具系统：RedHatEnterpriseLinuxServer工具：XShell5及Xftp5等远程工具安装包：Ruby-2.4.1及以上       Rubygems-2.6.12及以上       Redis-3.2.8及以上(3.x版本才开始支持集群功能)       Redis-3.0.0-gem及以上（该版本不一定要和red
redis requires ruby version 2.2.2的解决方案
 今天在做Redis的Cluster集群的时候，在执行geminstallredis时，提示如下错误：geminstallredisERROR:Errorinstallingredis:redisrequiresRubyversion>=2.2.2.CentOS7yum库中ruby的版本支持到2.0.0，可gem安装redis需要最低是2.2.2，采用rvm来更新ruby：1
Rails 4 jQuery与javascript冲突
我试图在Rails4中制作应用程序.我正在挣扎.我正在尝试合并一个bootstrap主题,我遇到了供应商javascripts和其余代码的问题.我认为问题可能与在我的application.js中使用jQuery然后使用以’$’符号开头的供应商.js文件有关：$.circleProgress={我刚看过这个：https://learn.jqu
sass环境搭建之node-sass，ruby
该内容全部为搬运，感谢作者的分享~，附有原文链接。使用ruby环境SASS学习系列之(一)---------SASS，SCSS环境搭建(Ruby) 使用node-sassSASS学习系列之(二)---------SASS，SCSS环境搭建(node-sass)通过命令编译：npmrunsassinput.scssoutput.csssass-loader在webpack打包里
我如何使用PHP 5.3 Closures,比如我们在Ruby中使用Blocks
我如何使用PHP5.3Closures,比如我们在Ruby中使用Blocks.我从来没有在Ruby中使用’for’循环,因为使用带有’each”read_all”inject’方法的块.我如何使用像Ruby块这样的PHP5.3闭包,并说再见’for’Loops
redis requires Ruby version &gt;= 2.2.2问题
一、说明：搭建Redis集群时，安装geminstallredis报错： redisrequiresRubyversion>=2.2.2的报错，查了资料发现是Centos默认支持ruby到2.0.0，可gem安装redis需要最低是2.2.2二、解决办法：解决办法是先安装rvm，再把ruby版本提升至2.3.31.安装curlsudoyuminstal
Deepin linux Compass.app安装
compass.app是集成了sass的工具，安装完Compass就能够使用sass。首先，上官网 可以看到官网上推荐的两种sass使用方式，application&commandlineapplication里不仅仅只有Compass，不过现在点击Compass.app进行下载。虽然通常我们说sass运行在Ruby环境下，但Compass.app安装使用并不需要
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot