标签: vue-component

如果限制超过 300 个字符，我想隐藏文本并显示link，如果单击链接则显示完整内容。

html:

 <tr v-for="(row,index) in datasource">
                            <td v-for="column in gridSchema.grid.columns" class="wrap-break-word" v-show="column.isVisible">  

<span v-if="row[column.headername].length >= 300  && toggle == false" v-html="$options.filters.limitTo(row[column.headername])">
                                    </span><a v-on:click="toggleFlag()" v-show="!row['isEditable'] && row[column.headername].length >= 300  && toggle == false" >Read more</a>
                                    <span v-if="(row[column.headername].length < 300  || toggle == true)" v-html="row[column.headername]">
                                    </span>

<td>
</tr>

js:

  data: {
                ..
                    toggle: false,
datasource:
[
      {
        "id": 0,
        "name": "Christa Hansen",
        "informations": "Unpleasant astonished an diminution up partiality. Noisy an their of meant. Death means up civil …

data() 中的错误：“TypeError：无法读取未定义的属性‘propsTitle’”

我无法通过数据的道具进行初始化。它一直向我显示此错误，但我不明白为什么？我阅读了 vuejs 教程，它表明title: this.propsTitle这是正确的方法。我缺少什么？谢谢大家！

data() 中的错误：“TypeError：无法读取未定义的属性‘propsTitle’”

          props: {
            propsTitle: String, 
            propsLevel: Number,
            propsProgress: Number,
          },

          data: () => ({
            title: this.propsTitle,
            progress: this.propsLevel,
            level: this.propsLevel,
            activeBtnTxt: "Start",
            isStarted: false

          }),  
// watch: {
      //   progress(val) {
      //     this.progress = val
      //   }
      // },
      // mounted() {
      //   console.log(this.propsProgress)
      //   // this.progress = propsProgress
      //   // this.level = propsLevel
      //   // this.title = propsTitle
      // },

我正在尝试为 Vue 应用程序创建一个导航栏，我正在使用 Vuetify，在大屏幕上有工具栏，在小屏幕上有打开导航抽屉的汉堡包图标。

它可以工作，但是抽屉前面有一个覆盖层，我无法更改页面。

这是代码：

<template>
  <div>
    <v-app-bar dark>
      <v-app-bar-nav-icon class="hidden-md-and-up" @click="sidebar = !sidebar"></v-app-bar-nav-icon>
      <v-navigation-drawer v-model="sidebar" app>
        <v-list>
          <v-list-item v-for="(item, i) in menuItems" exact :key="i" :to="item.path">{{item.title}}</v-list-item>
        </v-list>
      </v-navigation-drawer>
      <v-toolbar-title>Jobify</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn text v-for="item in menuItems" :key="item.title">
          <router-link :to="item.path">{{item.title}}</router-link>
        </v-btn>
      </v-toolbar-items>
    </v-app-bar>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      sidebar: false,
      menuItems: [
        { path: "/jobs", name: "jobs", title: "Jobs" },
        { path: "/companies", name: "companies", title: "Companies" },
        { path: "/jobs/new", name: "new-job", …

我正在为我的应用程序构建“基本”组件，主要用于表单管理。到目前为止，我已经创建了一个自定义 input、textarea、select和radio。但是，所有这些组件一次只有“一个”值。

对于无线电和复选框，我的组件一次构建多个无线电/复选框，所有这些都附加到同一个 v-model。但是，我的复选框组件没有按预期工作。它没有将“所有选中的复选框”存储在 v-model 的数组中，而是只注册最后一个点击的 :(。

如何通过从数组中添加/删除元素来覆盖“更改”事件，以便相应地更新附加模型？

这是我的复选框组件代码：

/**
 * @description Component used to display a group of checkboxes
 * @author Jordan Kowal
 * @date 2019-11-30
 * @param name String, name attribute
 * @param alignment String, defines item alignment and should be "centered", "left", or "right"
 * @param block Boolean, whether items are displayed as "block" or "inline-block"
 * @param entries Array, list of objects with the following keys: label, …

我的页面中有一个轮播组件，其中的数据通过 AJAX 调用服务器来加载。这部分没问题，但是当旋转木马项目附加到旋转木马时，它就会崩溃。所以我需要在AJAX成功后重新渲染轮播。有人有什么想法吗？我搜索了很多，但找不到 vue.js 的任何内容。

我的代码：

<carousel class="original-carousel" :dots="false" :nav="false">
                            <router-link class="product-item" to="/product" v-for="product in originalGames">
                                <div class="image-holder">
                                    <img v-bind:src="product.thumbnail_url" v-bind:alt="product.name">
                                    <div class="product-info">
                                        <div class="product-platform">
                                            origin
                                            <img src="/src/assets/imgs/platform/origin-color.svg" >
                                        </div>
                                        <div class="product-region">
                                            US
                                        </div>
                                    </div>
                                </div>
                                <h2 class="product-title">{{product.name}}</h2>
                                <div class="product-bottom">
                                    <div class="product-card-price">
                                        <div class="original-price__holder" >
                                            <span class="sale-range" v-if="product.sale_percent !== false">%{{product.sale_percent}}</span>
                                            <span class="original-price" v-if="product.sale_percent !== false"> {{product.regular_price}}</span>
                                        </div>
                                        <span class="sale-price">{{product.price}}</span>
                                    </div>
                                    <button class="add-to-cart btn btn--circle btn--transparent">+</button>
                                </div>
                            </router-link>
                        </carousel>


export default {
    name: "homePage",
    components: {searchBar, topNav, siteFooter, carousel},
    data(){
        return …

我正在创建我的.vue组件文件以从index.html我的 SPA文件中删除模板。将第一个组件移动到单独的文件后，我在控制台中收到此错误：Uncaught SyntaxError: Cannot use import statement outside a module. 我没有使用 webpack、browserify babel 或类似的工具，我只是使用 javascript。我如何解决这个问题并在应用程序的主 javascript 文件中导入单个文件组件？

出现此错误 - 迭代中的元素期望具有 'v-bind:key' 指令。(vue/require-v-for-key)

Codepen - https://codesandbox.io/s/competent-pine-8u9mt?file=/src/components/Laptops.vue:386-393

有谁知道如何解决这个错误？

有谁知道如何将动态槽从父母传递给孙子？

我知道如何使用静态命名槽来做到这一点，但不知道如何使用动态命名槽。

例如，假设父级中的槽模板为“名称”，而孙子具有基于动态列的槽。

如何在子项中添加模板以将其传递下去。

这是我的代码的示例：

// GrandChild.vue

<template>
    <table>
        <tbody>
            <template v-for="(item, itemIndex) in items">
                <tr :key="itemIndex">
                    <template v-for="(col, colIndex) in columns">
                        <slot
                          v-if="$scopedSlots[col]"
                          :name="col"
                          :item="item"
                        />
                        <td
                          v-else
                          :key="colIndex"
                        >
                          {{ String(item[col]) }}
                        </td>
                    </template>
                </tr>
            </template>
        </body>
    </table>
</template>

<script>
    export default {
        props: ['items', 'columns']
    }
</script>

// Child.vue

<template>
    <grand-child :items="items" :columns="columns">
        <!-- not sure what goes here -->
    </grand-child>
</template>

<script>
    export default {
        props: ['items', 'columns']
    }
</script>

// Parent.vue

<template>
    <child …

我们在 Vue.js 中使用 Quasar 框架。考虑以下q-card可点击的内容：

<div class="q-pa-md row items-start q-gutter-md cursor-pointer">
  <q-card class="my-card" clickable @click="GetSapRoster">
    <q-card-section class="bg-primary text-white">
      <div class="text-h6">SAP Truck Roster</div>
      <div class="text-subtitle2">Get the truck planning</div>
    </q-card-section>
  </q-card>
</div>

a 怎么可能达到q-card和 a一样的效果q-btn？

在使用类cursor-pointer 时，它只修复了鼠标指针，而不是像 a 一样的阴影效果q-btn。

我有一个简单的隐藏表格

<template>
  <form ref="form" method="POST" action="https://target.com/post" accept-charset="utf-8">
    <input type="hidden" name="data" :value="myData"/>
    <input type="hidden" name="signature" v-model="mySignature" />
    <input ref="submit" type="submit">
  </form>
</template>

并且我希望附加到不同按钮 ( v-on:click="submitForm") 的方法提交此表单设置数据。

export default {
  name: 'MyComponent',
  methods: {
    submitForm() {
      // should update values for inputs
      this.myData = 'dynamically calculated';
      this.mySignature = 'creates signature from data';
      // submit the form with values above
      this.$refs.form.submit();
    },
  },
  data() {
    return {
      myData: null,
      mySignature: null,
    }
  }
}

但似乎我误解了反应性/绑定/参考？在 Vue 中，所以我试过了

• this.$refs.submit.click();
• this.$forceUpdate();
• 设置 …