吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 4626|回复: 8
收起左侧

[求助] vue 写在methods的方法访问不到data的数据

[复制链接]
ing 发表于 2019-9-30 21:18
本帖最后由 ing 于 2019-9-30 21:22 编辑

写在methods下的 this.docState 访问不到 data 下的数据 docState ,但标签v-for可以遍历出来
捕获.PNG

this.docState 的值是undefined
捕获.PNG


完整
[Asm] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <div id="app"></div>

  <script src="https://unpkg.com/vue"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

  <div id="todo-list-example">
    <transition v-for="s in docState">
      <button v-bind:key="s.state" @click="buttonMessage">
        <slot>{{s.state}}</slot>
      </button>
    </transition>
  </div>

  <script type="text/javascript">
    var vm = new Vue({
      el: '#todo-list-example',
      data: {
        docState: [{
            state: 'saved'
          },
          {
            state: 'edited'
          },
          {
            state: 'editing'
          }
        ]
      },
      methods: {
        buttonMessage: function() {
          switch (this.docState) {
            case 'saved':
              return 'Edit'
            case 'edited':
              return 'Save'
            case 'editing':
              return 'Cancel'
          }
        }
      }
    })
  </script>

</html>

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

琴似蓝调 发表于 2019-9-30 21:21
你这个数组的键都是一样的,肯定获取不了垃
琴似蓝调 发表于 2019-9-30 21:23
你的this.docState只是获取了这个数组,你需要获取是数组下的值
 楼主| ing 发表于 2019-9-30 21:39
琴似蓝调 发表于 2019-9-30 21:21
你这个数组的键都是一样的,肯定获取不了垃

键是不一样的,用的是v-for遍历的每个不同的state,vue官网的列表渲染那里借鉴的
 楼主| ing 发表于 2019-9-30 21:39
琴似蓝调 发表于 2019-9-30 21:23
你的this.docState只是获取了这个数组,你需要获取是数组下的值

可问题是它不应该是undefined
huazai1 发表于 2019-9-30 21:50
ing 发表于 2019-9-30 21:39
可问题是它不应该是undefined

你在控制台输出的this.docState实际是window.docState 你应该用vm.docState
SxgoowTmIr 发表于 2019-9-30 23:03
data  不要return 的吗
头像被屏蔽
yxc20086 发表于 2019-10-1 00:12
提示: 作者被禁止或删除 内容自动屏蔽
庸人误我 发表于 2019-10-1 12:27
你想在控制台输出,需要使用Vue的实例对象访问
如:vm.docState

this是默认window对象的
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-30 10:05

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表