我正在尝试在 vue.js 中上传之前预览选择的多个图像。看起来我做错了什么，但不知道是什么。我会感谢一些指导。在我的组件下面找到：
<template>
<div class="form-group">
<textarea name="body" class="form-control" v-model="body" rows="4" placeholder="What's on your mind"></textarea>
</div>
<div class="form-group">
<div v-if="attach">
<img :src="selectedFile" style="width:70px; height:60px" />
<button type="button" class="btn btn-danger" @click.prevent="cancelImage">Cancel</button>
</div>
<div v-else>
<input type="file" @change="onFileChange" class="btn btn-default" multiple>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" @click.prevent="sendPost">Post</button>
</div>
</template>
<script>
export default {
data(){
return {
body: '',
images: [],
attach: false,
selectedFile: ''
}
},
methods: {
onFileChange(e){
var files = e.target.files;
if(files){
var files_count = files.length;
for …我有一个 Laravel/Vuejs 应用程序，可以在本地主机上运行良好。部署到 Heroku 后，我意识到添加到 app.scss 的样式不会编译到我的 public/css 文件中，因此没有效果。此外，在我使用 .push 推送到 Heroku 后，对 vuejs 组件的修改不会更新应用程序git push heroku master。
我已经在我的heroku仪表板上添加了heroku/nodejs buildpack。这是我的 webpack.mix.js 文件内容；
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.browserSync({
proxy: 'localhost:8000'
});
我的 package.json 文件：
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress …我正在尝试将上传的文件和数据值附加到vue.js中的FormData。在我的控制器中，只能评估文件请求。
data() {
return (
file: '',
categ: ''
}
}
在我的方法中：
Var form = new FormData();
var file = this.file;
var cat = this.categ;
form.append('pics', file, cat);
axios.post('/api', form,
{ headers: {'Content-Type': 'multipart/form-data'}
}).then (res =>{ console.log(res)});
我究竟做错了什么？
我的vue组件中有一个从API返回的图像数组，其迭代和显示方式如下：
<span v-for="pic in pics">
<img :src="'images/'+pic" onmouseover="highlight(pic)" :class="{isHovered = hovered}" />
</span>
在我的脚本中：
data(){
return {
pics: [],
hovered: false,
}
},
methods:{
highlight(pic){
this.hovered = true;
}
}
在我的CSS中
isHovered{
border: 2px solid red;
scale: 1.2;
cursor: pointer;
}
问题是每当我将鼠标悬停在一个图像上时，所有图像都将返回isHovered类。我的意图是仅将悬停的图像绑定到isHovered类。请问我在做什么错。任何指导将不胜感激。
我已经被困在这个问题上几个小时了，用谷歌搜索但仍然无法解决它。我会感谢一些指导，请伙计们。我在我正在处理的 php 项目中包含一个类似论坛的页面，用户可以在其中对帖子发表评论，然后提供对个人评论的回复。我的挑战在于代码的回复部分。我在评论后放置了一个回复按钮，点击后淡出以显示用户可以输入回复的文本区域。现在，当我单击回复按钮时，它会淡出，这没关系，但是文本区域会出现在帖子上的所有评论中。我尝试引入一个带有帖子 ID 值的数据属性（data-id）以将单击的回复按钮绑定到要显示的特定文本区域，但我似乎无法理解这一点。任何帮助将不胜感激。我的 PHP 代码在这里：
<?php
require("includes/conn.php");
$stmt=$conn->prepare("SELECT post_id, user, topic, post, time FROM post_tb ORDER BY time DESC");
$stmt->execute();
$result = $stmt->get_result();
$num_of_rows = $result->num_rows;
if ($num_of_rows > 0){
while ($row = $result->fetch_assoc()){
$post_id = $row['post_id'];
$user = $row['user'];
$topic = $row['topic'];
$post = $row['post'];
$time = $row['time'];
$time = date('M dS, Y g:i A', strtotime($time));
echo '<div>
<div>
<h5><strong>'.$user.'</strong></h5><h6>'.$time.'</h6>
<h5><strong>'.ucfirst($topic).'</strong></h5>
<p data-id="'.$post_id.'">'.$post.'</p>
</div>
<div>
<button type="button" class="btn btn-primary rep" id="but_rep" data-id="'.$post_id.'">Reply</button>
</div>
<form id="comment_reply" data-id="'.$post_id.'" method="post" …