var MainTable = Vue.extend({
  template: "<ul>" +
    "<li v-for='(set,index) in settings'>" +
    "{{index}}) " +
    "{{set.title}}" +
    "<button @click='changeSetting(index)'> Info </button>" +
    "</li>" +
    "</ul>",
  data: function() {
    return data;
  }
});

Vue.component("main-table", MainTable);

data.settingsSelected = {};
var app = new Vue({
  el: "#settings",
  data: data,
  methods: {
    changeSetting: function(index) {
      data.settingsSelected = data.settings[index];
    }
  }
});

使用上面的代码,单击按钮时会出现以下错误.

[Vue警告]:属性或方法"changeSetting"未在实例上定义,但在呈现期间引用.确保在数据选项中声明反应数据属性.(找到<MainTable>)

我正在使用VueJS制作一个简单的资源管理游戏/界面.在那一刻我想要roll每12.5秒激活一次该功能,并将结果用于另一个功能.目前虽然我一直收到以下错误:

未捕获的TypeError:无法读取未定义的属性'roll'(...)

我试过了:

• app.methods.roll(6);
• app.methods.roll.roll(6);
• roll.roll()
• roll()

但似乎无法访问该功能.任何想法我怎么可能实现这一点？

methods: {

  // Push responses to inbox.
  say: function say(responseText) {
    console.log(responseText);
    var pushText = responseText;
    this.inbox.push({ text: pushText });
  },

  // Roll for events
  roll: function roll(upper) {
    var randomNumber = Math.floor(Math.random() * 6 * upper) + 1;
    console.log(randomNumber);
    return randomNumber;
  },

  // Initiates passage of time and rolls counters every 5 time units.
  count: function count() {
    function counting() {
      app.town.date += 1;
      app.gameState.roll += 0.2;

      if (app.gameState.roll …

我目前在我的错误监控工具 Sentry 上收到一个奇怪的 JavaScript 错误，上面写着can't redefine non-configurable property "userAgent".

错误似乎发生在多个页面上，但仅发生在 Firefox 上。此外，在所有错误中，引用页面似乎都是“https://www.startpage.com/”。

但是，我无法重现错误并且不知道是什么导致了错误，因为我没有对navigator.userAgentvar进行任何分配。

有没有其他人也有这个问题，或者有任何线索可能导致这个错误？

我只是想提高我对 JavaScript Promises 工作原理的理解。我创造了以下情况：

LOG 'FOO'
RUN CALLBACK LOGGING 'CALLBACK'
LOG 'BAR'

期望所有功能立即完成（我的意思是它们不会花费过多/未知的时间来完成，您将使用异步操作来完成）以便上述操作顺序将按该顺序发生。

您可以通过以下方式编写：

function foo(cb) {
  // LOG 'FOO'
  console.log('foo');
  // RUN CALLBACK
  cb();
}

function callback() {
  // LOG 'CALLBACK'
  console.log('callback');
}

foo(callback);

console.log('bar');

这会根据我在开始时指定的情况产生预期的输出。

> foo
> callback
> bar

您也可以通过以下方式编写它：

function foo() {
  return new Promise((resolve) => {
    // LOG 'FOO'
    console.log('foo');
    return resolve(null);
  });
}

function callback() {
  // LOG 'CALLBACK'
  console.log('callback');
}

foo().then(callback);

// LOG 'BAR'
console.log('bar');

这种情况会产生以下结果：

> foo …

我有一个文件组件Main.Vue.

我还有三个其他单个文件组件A.vue,B.vue和C.vue.

我希望每次都能在Main.Vue内部显示一个不同的组件.我做的是这样的:

<template>
<div>
<a v-if="isAVisible" ></a>
<b v-if="isBVisible" ></a>
</div>
</template>

<script>
import A from './A.vue';
import B from './B.vue';
...

这可行但不完全是我想要的.我想要一个不同的文件Factory.js,它可以导入所有组件A,B,C,..并且具有返回我的组件的函数,我可以在Main.vue中以某种方式使用它.这是我试过Factory.js的样子:

import A from './A.vue';
import B from './B.vue';
function getComponent(){
  if (..)
    return new A();
  else if (..)
    return new B();
  ...
}

这根本不起作用.我想要工厂文件方法,因为:

1)我想将它拆分为不同的工厂文件

2)我想"附加"数据到每个组件.所以我将有一个对象,其中包含返回实际组件的函数+一些额外的数据,如"name"

任何想法如何做到这一点？

我正在尝试在Vue中实现CSS类型指示器。没有Vue，它看起来像这样：

.typing-indicator {
  background-color: #E6E7ED;
  width: auto;
  border-radius: 50px;
  padding: 20px;
  display: table;
  margin: 0 auto;
  position: relative;
  -webkit-animation: 2s bulge infinite ease-out;
          animation: 2s bulge infinite ease-out;
}
.typing-indicator:before, .typing-indicator:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: -2px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #E6E7ED;
}
.typing-indicator:after {
  height: 10px;
  width: 10px;
  left: -10px;
  bottom: -10px;
}
.typing-indicator span {
  height: 15px;
  width: 15px;
  float: left;
  margin: 0 1px;
  background-color: #9E9EA1;
  display: block;
  border-radius: 50%;
  opacity: 0.4; …

我有一个 HTML DOM 对象，我选择了所有具有以下属性的元素：data-reveal。

var revealList = doc.querySelectorAll('[data-reveal]');

我想遍历这些元素并检查是否有具有类注释的父元素。只有当班级不在时，我才想做点什么。

我使用了其他帖子中建议的最接近的方法，但代码没有返回任何内容。

for (var i = 0; i < revealList.length; i++) {
  if (revealList[i].closest('[data-conceal]').length = 0) {
    // do something
  }
};

这是一个最小的 HTML 示例。

<div class="parent">
  <div class="note">
    <img data-reveal="2" href="">
    <img data-reveal="3" href="">
    <img data-reveal="4" href="">
  </div>
  <img data-reveal="5" href="">
  <img data-reveal="6" href="">
</div>

可能是我如何在 if 子句中选择对象的错误？

我想做什么

给定来自用户输入的字符串，我试图用包裹在组件中的特定子字符串来呈现这个字符串。在我的特殊情况下，匹配的子字符串是一个匹配正则表达式模式的日期，并且应该包装它的组件是来自Vuetify的芯片。

我做了什么

以上是我到目前为止所取得的成绩的截图。的输入在其textarea下方呈现，某些子字符串包裹在 Vuetify 的芯片组件中。上面是通过用 HTML 替换正则表达式模式匹配的子字符串来呈现组件并将此字符串提供给v-html用于呈现的指令来实现的。下面是一些代码，显示了这是如何完成的。

<div style="line-height:40px;" v-html="messageOutput"></div>

let finalStr = ''
let str = 'Your a/c no. XXXXXXXXXX85 is credited on 15-11-17.'

let dateReg = /((?=\d{4})\d{4}|(?=[a-zA-Z]{3})[a-zA-Z]{3}|\d{2})((?=\/)\/|-)((?=[0-9]{2})[0-9]{2}|(?=[0-9]{1,2})[0-9]{1,2}|[a-zA-Z]{3})((?=\/)\/|-)((?=[0-9]{4})[0-9]{4}|(?=[0-9]{2})[0-9]{2}|[a-zA-Z]{3})/

const date = dateReg.exec(str)
finalStr = str.replace(date[0], `
 <div class="md-chip md-chip-clickable">
  <div class="md-chip-icon primary"><i class="material-icons">date_range</i></div>
   ${date[0]}
 </div>
`)

什么不起作用

问题是使用自定义组件而不是纯 HTML 不会提供预期的输出。样式不会呈现，组件不会对事件做出反应。

如何在 Vue.js 中使用组件动态包装子字符串？