小编Bou*_*him的帖子

我想将 html 存储在变量内。例子：

data: function() {\n  return {\n    my_html: \'<input type="text" v-model="data"\'\n  }\n}\n

我想在数据中接收用户在字段中输入的值。但此连接不起作用\n完整示例：

var test = new Vue({\n  el: \'#some_id\',\n  data: function() {\n    return {\n      data: \'\',\n      my_html: \'<input type="text" v-model="data" />\'\n    }\n  },\n  template: \n    \'<div>\n      <input type="text" v-model="data" />\n      <input type="text" v-model="data" />\n      <span v-html="my_html"></span>\n    </div>\'\n});\n

在此示例中，前两个输入通常会与数据链接并相互链接，但第三个输入（跨度内的输入）将\xe2\x80\x99t

我正在尝试呈现组件列表。除了 img src url 之外，所有数据属性都正确显示。

文件/文件夹是：

CryptContent.vue - 包含 v-for

• 渲染资产的组件/ - 包含图像

CryptContent.vue 包含：

<template>
<OwnedCardContent
            v-for="card in allCards"
            :id="card.id"
            :name="card.name"
            :cost="card.cost"
            :cset="card.cset"
            :edition_total="card.edition_total"
            :level="card.card_level"
            :unlock_czxp="card.unlock_czxp"
            :buy_czxp="card.buy_czxp"
            :transfer_czxp="card.transfer_czxp"
            :sacrifice_czxp="card.sacrifice_czxp"
            :url="card.graphic"
            :card_class="card.bg"
></OwnedCardContent>
</template>

<script>
allcards : [
      {id:0, name: 'Jim Zombie',graphic: './assets/jim.svg', cost: 300, cset: 'We like to party set', edition_total: ' of 100',unlock_czxp : '1,300,300',card_level: 80, buy_czxp: '1,800',transfer_czxp: '100', sacrifice_czxp: '2,300',bg: 'card-bg card-bg-6'},
]
 </script>`

OwnedCardContent.vue 包含：

<template>
<div id="1" :class="card_class">
            <img class="card-img" :src="url" />
            <span class="card-edition">#1{{edition_total}}</span>
            <div …

所以几年前这是不好的做法

array = [];

因为如果数组在某处被引用，该引用没有更新或类似的东西。

正确的方法应该是 array.length = 0;

反正现在javascript已经更新了，有个框架叫Vue.js

Vue 不会捕获， array.length = 0;因此该属性不会是响应式的。但它确实抓住了array = [];

我的问题是，我们现在可以使用 array = [];，还是 javascript 仍然损坏？

.prevent动态使用v-on的修饰符时如何使用？

<a
  href="#"
  class="modal-overlay"
  aria-label="Close"
  v-on="overlayClickClosesModal ? { click: () => closeModal() } : {}"
/>

我正在尝试阻止附加 URL/#

我试过了

v-on.prevent

v-on:prevent

v-on="overlayClickClosesModal ? { 'click.prevent':

在Vue实例中，我有一个名为“ block”的数组，其中包含4个值。我用v-for将此数组渲染为DOM：

<div class="block" @click="shuffleArray()">
    <div v-for="(number, index) in block">
        <span :class="[`index--${index}`]">{{ number }}</span>
    </div>
</div>

这会创建一个内部有4个跨度的div，每个跨度都有一个“ index--0”，“ index--1”等类。

单击时，数组的值更改顺序：

shuffleArray: function() {
    const shifted = this.block.shift();
    this.block.push( shifted );
}

尽管值确实发生了变化，但它们并未在实际的DOM中移动，如何在单击时实现跨度实际上在DOM中的位置变化？每个跨度都有适用的样式，因此我想用视觉表示值确实会改变顺序：

    span.index--0 {
        background-color: tomato;
    }

    span.index--1 {
        background-color: khaki;
    }

    span.index--2 {
        background-color:lavenderblush;
    }

    span.index--3 {
        background-color: lightcoral;
    }

也许有不需要CSS的纯CSS解决方案。

我一直在关注他们网站上的官方 VueJS 路由器文档：. 我现在面临的问题是，它会自动将我重定向到 url: http://127.0.0.1:8080/#/，尽管我输入了 URL: http://127.0.0.1:8080/。

当我点击一个按钮，即设置一个新的URI对我来说，像这样同样出现：http://127.0.0.1:8080/#/foo。当我按下按钮时会发生这种情况，这应该让我到达那里。

如果我打开 URL：http://127.0.0.1:8080/foo它会自动将我的 URL 重写为http://127.0.0.1:8080/foo#/.

其他一切仍然有效，并且正在呈现路由器视图，但是对于用户而言，如果没有烦人的 # 来体验该站点肯定会很好。

如前所述，我确实遵循了 VueJS 文档，但我对某些内容进行了一些更改。但是，这些不会影响错误。

这是我的 main.js 文件。

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import AnotherComponent from './components/AnotherComponent.vue';

Vue.use(VueRouter);
Vue.config.productionTip = false;

const routes = [
    { path: '/foo', component: AnotherComponent }
];

const router = new VueRouter({
    routes
});

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

这是我的 App.vue …

我试图通过在字符串中使用 \n 在作为 Vuetify 对话框文本的字符串中插入一个新行。但它不起作用。

这是调用 Vuetify 对话框的函数的代码

handleDialog()
{
    this.dialogHeading = "Clearing all component data"
    this.dialogText = "Do you really want to clear all the component data?\nThis will clear the components except the pressure and composition basis!"
    this.dialogBtn1 = "Cancel"
    this.dialogBtn2 = "Yes"
    this.isDialog = true
  
}

这是显示 Vuetify 对话框的代码

<v-layout row wrap  >
   <v-flex class="text-xs-center">
       <v-dialog v-model="isDialog" persistent max-width=400>
          <v-card>
              <v-card-title  class=" error title white--text 
              darken-2 font-weight-bold">{{dialogHeading}}
              </v-card- title>
              <v-card-text>{{dialogText}}</v-card-text>
              <v-card-text v-if="dialogText2">{{dialogText2}}
              </v-card-text>

              <v-card-actions   >
                <v-btn  v-if="dialogBtn1" flat …

我大致按照这篇文章制作了一个可拖动的组件：

<template>
  <div ref="draggableContainer" class="draggable-container">
    <div class="draggable-header" @mousedown="dragMouseDown">
      <slot name="dragger"></slot>
    </div>
    <slot></slot>
  </div>
</template>

然后在我的Calculator.vue组件中我有：

<template>
  <Draggable class="calculator">
    <input type="text" class="calculator-screen" slot="dragger" value="" />

    <div class="calculator-keys">
      <button type="button" class="operator" value="+">+</button>
      <button type="button" class="operator" value="-">-</button>
      <button type="button" class="operator" value="*">&times;</button>
      <button type="button" class="operator" value="/">&divide;</button>

      <button type="button" value="7">7</button>
      <button type="button" value="8">8</button>
      <button type="button" value="9">9</button>

      <button type="button" value="4">4</button>
      <button type="button" value="5">5</button>
      <button type="button" value="6">6</button>

      <button type="button" value="1">1</button>
      <button type="button" value="2">2</button>
      <button type="button" value="3">3</button>

      <button type="button" value="0">0</button>
      <button type="button" class="decimal" value=".">.</button> …

我正在尝试"https://example.com/some/path"使用 Vue3 和 Vue-router获取当前路径（类似于）。

之前，在使用 Vue2 时，我可以使用以下方法获取当前路线：

    // works with vue 2.x with composition-api, but not with vue 3.x
    setup(_, ctx) {
        const path = computed(() => ctx.root.$route.path)

但在 Vue3 中无法使用ctx.root（如 Evan You 此处所述）。
那么使用 Vue3 获取当前路由的首选方法是什么？

所以我看到很多关于这个问题的帖子，但我无法理解为什么我在这里做错了。我有一个放置在组件中的表单。它主要由使用 vuetify 的 TextFields 组成。然后我在其他地方重用这个表格。我尝试了不同的方法，但仍然出现错误，这是我的组件。

  <v-window continuous  v-model="step">
                  <v-window-item :value="1">
                      <v-form>
                        <v-container>
                          <v-row>
                            <v-col
                              cols="12"
                              md="4"
                            >
                              <v-text-field
                                label="First name"
                                required
                                autocomplete="off"
                                clearable

                                v-model="modalFirstNameValue"

                              ></v-text-field>
                            </v-col>

                            <v-col
                              cols="12"
                              md="4"
                            >
                              <v-text-field
                                label="Last name"
                                required
                                autocomplete="off"
                                clearable

                                v-model="modalLastNameValue"

                              ></v-text-field>
                            </v-col>

                            <v-col
                              cols="12"
                              md="4"
                            >
                              <v-text-field
                                label="E-mail"
                                required
                                autocomplete="off"
                                clearable
                                v-model="modalEmailValue"
                              ></v-text-field>
                            </v-col>
                        </v-container>
                      </v-form>
                  </v-window-item>
<script>
export default {
  props: {
    modalFirstNameValue: {
    },
    modalLastNameValue:{

    },
    modalEmailValue:{

    },
</script>

导入组件

<template>
      <div id="app">
        <FormModal
          v-show="isModalVisible"
          @close="closeModal"
          modalTitle="Book Appointment Form"
          v-bind:modalFirstNameValue="modalFirstNameValue"
          v-bind:modalFirstNameLabel="modalFirstNameLabel" …