小编Vik*_*sIT的帖子

我卡住了，无法使用我的 webpack 配置从 HTML 加载带有 src 属性的图像。我克隆了一个完整设置 webpack 的 repo，但我知道有一种方法可以直接从 HTML 自定义和加载图像。

Webpack.config.js 文件：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
entry: {
main: "./src/index.js"
},
output: {
path: path.join(__dirname, "../build"),
filename: "[name].bundle.js"
},
mode: "development",
devServer: {
contentBase: path.join(__dirname, "../build"),
compress: true,
port: 3000,
overlay: true
},
devtool: "cheap-module-eval-source-map",
module: {
 rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: "babel-loader" // transpiling our JavaScript files using Babel …

我正在使用 Vue2 日期范围选择器（https://innologica.github.io/vue2-daterange-picker/#example-playground）并遇到以下问题

所选日期值显示格式有问题。

问题是，当我选择日期值时，输入按以下格式显示它们：

我想获得选择日期的结果：

Vue组件：

    <date-range-picker
        ref="picker"
        opens="center"
        :locale-data="locale"
        :maxDate="maxDate"
        v-model="dateRange"
        @update="update"
    >
      <div slot="input" slot-scope="picker">{{ dateRange.startDate}} - {{ 
         dateRange.endDate}}</div>
    </date-range-picker>

data: () => ({
maxDate: moment().format('YYYY-MM-DD'),
dateRange: {
  startDate: moment().format('YYYY-MM-DD'),
  endDate: moment().format('YYYY-MM-DD'),
},
locale: {
  direction: 'ltr', //direction of text
  format: 'mm/dd/yyyy',
  separator: ' - ', //separator between the two ranges
  applyLabel: 'Apply',
  cancelLabel: 'Cancel',
  weekLabel: 'W',
  customRangeLabel: 'Custom Range',
  daysOfWeek: moment.weekdaysMin(), //array of days - see moment documenations for details
  monthNames: moment.monthsShort(), //array of …

我已经制作了一个 vue 表单，但无法使用我的表单来预览他们想要提交到表单的图像。

刷新页面后，我可以看到图像，但上传时预览链接已损坏。有一个选项可以删除图像，该选项有效，但现在的目标是显示图像预览。

                   <div class="image-block">
                            <div @click="selectImage('initial-image')">
                                <img class="img-icon"
                                     v-if="imageName === null">
                                <div :class="{'error' : errors.length > 0}" class="text-center"
                                     v-if="imageName === null">
                                    Select an image to upload
                                </div>
                            </div>
                            <div class="image-preview" v-if="imageName !== null">
                                <div class="remove-image" @click="removeImage"><i
                                    class="fa fa-remove"></i>
                                </div>
                                <img v-bind:src="'/images/json-ld/images/' + imageName" class="growth-image"
                                     @click="selectImage('initial-image')">
                            </div>
                        </div>
                        <validation-provider name="image" v-slot="{ validate, errors }">
                            <input type="file" @change="validate" name="image" accept="image/*"
                                   class="hidden"
                                   v-on:change="showFilePreview">
                            <span class="validation-error form-span">{{ errors[0] }}</span>
                        </validation-provider>

方法：

 removeImage() {
            this.imageName = null;
        },
        selectImage(id) {
            document.getElementById(id).click();
        },
        showFilePreview(e) …

有一个选项可以显示more文本 或less，但该@click事件适用于 allelements并且 all 元素显示所有文本。

我知道，我需要传递一些值来标识单个元素，该值并不适用于所有元素，但目前卡住了，希望得到帮助。

HTML：

        <tr v-for="script in scripts.slice(0, 5)">
            <td>{{script.key}}</td>
            <td v-if="!readMore">{{script.script_content.substring(0, 200) + ".."}}</td>
            <td v-if="readMore">{{script.script_content}}</td>
            <button @click="showMore" v-if="!readMore" class="btn btn-primary">Show more</button>
            <button @click="showLess" v-if="readMore" class="btn btn-primary">Show less</button>
        </tr>

Vue数据和方法：

data: () => ({
       readMore: false,
    }),
    methods: {
        showMore() {
            this.readMore = true;
        },
        showLess() {
            this.readMore = false;
        },

数组值：

如何使方法仅适用于单个元素？

在这种情况下，不需要创建组件，因为这种情况只会在一个页面上使用。