标签: vue-component

如何可视化 Vue js 应用程序的组件层次结构？我知道这是一个 React Sight，用于实时查看 React 应用程序的组件层次结构树。

谢谢

我有一个简单的标题组件，其中包含一个可点击的汉堡包，我想将汉堡包分成一个单独的组件，但是当我这样做时，点击事件不再起作用，我想我需要某种布尔属性，但找不到解释或者我正在寻找错误的东西。

这作为单个组件工作

/components/Header.vue

<template>
  <div class="--row header__wrapper" :class="{active: menuClose}">
    <button class="hamburger" :class="{active: menuClose}" @click="menuClose=!menuClose">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuClose: false,
    };
  }
};
</script>

下面的内容不起作用，因为当分成两个组件时会丢失点击事件，这就是我陷入困境的地方。

/components/Header.vue

<template>
<div class="--row header__wrapper" :class="{active: menuClose}">
        <Hamburger/>
</div>
</template>

<script>
import Hamburger from "~/components/Hamburger.vue";
  export default {
    components: {
      Hamburger
    }
  }
};
</script>

/组件/汉堡.vue

<template>
  <button class="hamburger" :class="{active: menuClose}" @click="menuClose=!menuClose">
    <span></span>
    <span></span>
    <span></span>
  </button>
</template>

<script>
export default {
  data() {
    return { …

我的脚本是这样的：

===========================================----- ===================

<template>
  <v-card
    max-width="1200"
    class="mx-auto"
  >
    <v-container
      class="pa-2"
      fluid
    >
      <v-row>
        <v-col
          v-for="(item, i) in items"
          :key="i"
        >
          <v-card
            :color="item.color"
            dark
          >
            <v-list-item three-line>

              <v-list-item-avatar
                size="125"
                tile
              >
                <v-img :src="item.src"></v-img>
              </v-list-item-avatar>

              <v-list-item-content class="align-self-start">
                <v-list-item-title
                  class="headline mb-2"
                  v-text="item.title"
                ></v-list-item-title>

                <v-list-item-subtitle v-text="item.artist"></v-list-item-subtitle>
                <v-list-item-subtitle v-text="item.artist"></v-list-item-subtitle>
              </v-list-item-content>

              <v-list-item-content class="align-self-start">
                <v-list-item-title
                  class="headline mb-2"
                  v-text="'right align'"
                ></v-list-item-title>
              </v-list-item-content>

            </v-list-item>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      items: [
        {
          color: '#1F7087',
          src: 'https://cdn.vuetifyjs.com/images/cards/foster.jpg',
          title: 'Supermodel',
          artist: 'Foster …

我有一个 Vue 组件的模板（请参阅CODEPEN）：

<div class="some-class">
    <v-form >
        <v-container @click="someMethod()">
            <v-row>
                <v-col cols="3" sm="3" v-for="p in placeholders" :key="p">
                    <v-text-field :placeholder="p" single-line outlined >
                    </v-text-field>
                </v-col>
            </v-row>
        </v-container>
    </v-form>
</div>

其中placeholders有一个数组，例如：

['Title 1', 'Title 2', 'Title 3',...'Title 21']

并且some-class位于组件的样式部分：

<style>
    div.some-class {
        display: inline-block;
        max-width: 100%;
        overflow-x: auto;
    }
</style>

我希望将它们全部放在一行上，这样我就可以水平滚动。但我得到的是这个：

如何调整样式以在一行上查看所有文本字段？

我是 Vue 新手，正在尝试设置最简单的滚动事件处理程序。由于某种原因，它根本没有发射。

在我的组件中，我有：

mounted () {
 window.addEventListener('scroll', this.runOnScroll);
},

methods: {
 runOnScroll () {
   console.log('scroll!');
 },
},

这太基本了，我不明白为什么 runOnScroll 没有触发！

请参阅此处组件之间的关系 如何在VueJS中将值从一个子组件传递到另一个子组件？

下面的代码片段没有给出错误并且不显示图像

<img v-bind:src="image_url" /> 

代码：

<template>
  <div>
    <img v-bind:src="image_url" />
  </div>
</template>

<script>
export default {
  props: ["image_url"]
};
</script>

image_url来自另一个组件，在 VueJS 开发人员工具中我能够确认该值是一个 url。看起来我尝试渲染动态图像的方式有问题。

我正在构建一个 Trivia 应用程序，并且有一个<h1>每 10 秒更改一次的元素。b-form-group我想将单选按钮组组件（是Bootstrap-Vue 组件）的宽度与元素的宽度相匹配<h1>。像这样的东西：

我尝试在值发生变化时watchers进行更新。但是，使用此代码，按钮组的宽度似乎与上一个问题的宽度而不是当前问题的宽度匹配。我还尝试了其他属性，例如, , 。我只是无法让它正常工作。有没有更简单的方法来匹配两个元素的宽度？buttonWidthquestionupdatedmountedcreated

<template>
  <div>
    <div id="question">
       <h1 ref="quest">{{ question }}</h1>
    </div>

    <b-form-group>
      <b-form-radio-group :style=getWidth
        ref="opts"
        :options="options"
        buttons
        stacked
        button-variant="outline-primary"
        size="lg"
        name="radio-btn-stacked"
      ></b-form-radio-group>
    </b-form-group>
  </div>
</template>

在我的脚本下我有：

export default {
  props: ['question', 'options'],
  data() {
    return {
      buttonWidth: '0 px',
    };
  },
  methods: {
  },
  watch: {
    question() {
      // console.log('Updating button width to ', this.$refs.quest.clientWidth);
      this.buttonWidth = `width: …

我有一个嵌套对象，只想打印对象名称。我如何在 vue.js 中做到这一点？

var object1 = {
  'obj1' : {
    'obj1a' : 'a',
    'obj1b' : 'b'
  },
  'obj2' : {
    'obj2c' : 'c',
    'obj2d' : 'd'
  }
}

此代码打印正在迭代的对象的全部内容：

<div v-for="obj in object1" v-bind:key="obj">
  {{ obj }}
</div>

我怎样才能让它只打印字符串obj1和obj2？

谢谢！

考虑以下代码：

export default defineComponent({
  setup() {
    const miniState = ref(true)

    const setMiniState = (state: boolean, screenWidth: number) => {
      if (screenWidth > 1023) {
        miniState.value = false
      } else if (state !== void 0) {
        miniState.value = state === true
      }
      else {
        miniState.value = true
      }
    }

    watch('$q.screen.width', (width) => setMiniState(true, width))

    return { miniState, setMiniState }
  }
})

TypeScript 抛出此错误：

TS2769：没有与此调用匹配的重载。
重载 1 of 3, '(来源: SimpleEffect, options?: Pick, "deep" | "flush"> | undefined): StopHandle'，出现以下错误。类型“$q.screen.width”的参数不可分配给类型“SimpleEffect”的参数。

重载第 2 个（共 …

我有一个输入字段，我们称之为firstName。我想让用户只输入字母和撇号。没有数字和其他特殊符号。逻辑是这样的：

\n
1. 在 @keydown 上，某些方法（我们称之为“ checkName() ”）获取输入的字符。
\n
2. 然后它检查这个符号是否属于类似[Az]的符号。如果属于，则该方法不执行任何操作。如果不是 \xe2\x80\x93 该方法将其替换为''。（还需要向此检查数组添加一个撇号，以便用户也可以键入它）。
\n

我怎样才能意识到这一点？我寻找了一些 Vue 验证器和掩码，但没有找到我需要的东西。验证器只检查输入字段，掩码套件更好，但有必要有固定的字符串范围。

有任何想法吗？或者也许一切都变得更容易，而我却把它变得复杂了？