我想在子组件值更改时触发父方法...
我在下面粘贴了代码
第一部分是父部分，第二部分是子部分。...当我更改ifsc字段的值时，我想触发getIfscCode（）方法。
问题：当事件发生时，getIfscCode（）方法未触发可能是我未将任何道具传递给子元素的原因，但您可以建议我该怎么做。
<template>
<div class="bg-gray-200 h-full">
<header-view></header-view>
<div class="px-32 py-6">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id nemo quam voluptates tenetur atque, similique odio quasi assumenda, quo porro deleniti eos nobis officia tempore, at harum odit. Illo, doloribus.</p>
</div>
<h2 class="text-2xl text-center about">Apply for Subsidy</h2>
<div class="w-full h-full flex justify-center mt-16">
<form class="w-full max-w-lg">
<text-input id="name" placeholder="Enter Name" title="Name"></text-input>
<text-input id="fathername" placeholder="Enter Father Name" title="Father Name"></text-input>
<text-input id="phone" placeholder="Enter Active Mobile No" title="Mobile No"></text-input>
<text-input id="aadhar" placeholder="Enter Aadhar No" title="Aadhar No"></text-input>
<text-input id="accountno" placeholder="Enter Account No" title="Bank Account No"></text-input>
<text-input
id="ifsc"
placeholder="Enter IFSC Code"
title="Bank Branch IFSC Code"
v-model="data.ifsc"
@change="getIfscCode(data.ifsc)"
></text-input>
<text-input id="accountname" placeholder="Enter Account Name" title="Bank Account Name"></text-input>
</form>
</div>
<footer-view></footer-view>
</div>
</template>
<script>
import HeaderView from "./header/Header";
import FooterView from "./footer/Footer";
import TextInput from "./form/TextInput";
export default {
components: {
HeaderView,
FooterView,
TextInput
},
data() {
return {
data: {
name: "",
ifsc: ""
}
};
},
created() {},
methods: {
getIfscCode(code) {
axios
.get(
"https://mfapps.indiatimes.com/ET_Calculators/getBankDetailsByIfsc.htm?ifsccode=" +
code +
"&callback=objIFSC.getIfscData"
)
.then(res => {
console.log(res.data);
});
}
}
};
</script>
<template>
<div class="flex flex-wrap mb-6">
<div class="w-full px-3">
<label
class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
:for="id"
>{{title}}</label>
<input
class="appearance-none block w-full bg-gray-900 p-text-color border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 placeholder-blue-300"
:id="id"
type="text"
:placeholder="placeholder"
:value="inputvalue"
@input="$emit('update', $event.target.value)"
/>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String
},
id: {
type: String
},
placeholder: {
type: String
},
inputvalue: undefined
},
model: {
prop: "inputvalue",
event: "update"
}
};
</script>
答案 0 :(得分：0)
您发出 update 事件，但捕获了 change 事件。另外，因为您没有发出 input 事件，所以父组件中的v-model将不起作用。 尝试这样纠正：
子组件
var mysql = require('mysql');
var config = require('./config.json');
var jwt = require('jsonwebtoken');
var configuration = require('./jwtconfig.js');
const isBase64 = require('is-base64');
const base64mime = require('base64mime');
const AWS = require('aws-sdk');
AWS.config.update({ region: 'us-east-2' });
const s3 = new AWS.S3({ apiVersion: '2006-03-01' });
const bucket = "bucketname";
let path = "bucketpath/";
var pool = mysql.createPool({
host: config.dbhost,
user: config.dbuser,
password: config.dbpassword,
database: config.dbname
});
module.exports.handler = (event, context, callback) => {
const { eventname, event_type, event_platform, event_date, co_host, stream_url, description, event_time, user_id, zoom_id,c_id } = JSON.parse(event.body);
const image = JSON.parse(event.body).imageBase64;
//let token = event.headers['x-access-token'] || event.headers['authorization'];
context.callbackWaitsForEmptyEventLoop = false;
// if (token) {
// jwt.verify(token, configuration.secret, (err, decoded) => {
// if (err) {
// callback({
// statusCode: 201,
// headers: {
// "Access-Control-Allow-Origin": "*",
// "Access-Control-Allow-Headers": "Content-Type,x-access-token",
// // "Access-Control-Request-Headers":"x-access-token",
// "Access-Control-Allow-Methods": "OPTIONS,POST"
// },
// body: JSON.stringify(err)
// }, null);
// } else {
// event.decoded = decoded;
if (eventname && event_type && event_date) {
let key = path + "img" + "_" + new Date().getTime();
const options = {
Bucket: bucket,
Key: key,
StorageClass: 'STANDARD_IA',
ACL: 'public-read',
ContentType: base64mime(image),
ContentEncoding: 'base64',
Body: Buffer.from(image.replace(/^data:image\/\w+;base64,/, ""), 'base64')
};
s3.upload(options, (err, data) => {
if (err) {
callback({
"statusCode": 400,
"headers": {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "Content-Type,x-access-token,Origin,XMLHttpRequest",
"Access-Control-Request-Headers":"x-access-token",
"Access-Control-Allow-Methods": "OPTIONS,POST",
"Access-Control-Allow-Credentials" : "true"
},
"body": JSON.stringify(err)
}, null);
} else {
var bhu = data["Location"];
callback(null, { statusCode: 200, headers: { "Access-Control-Allow-Origin": "*" , "Access-Control-Allow-Headers": "Origin, X-Requested-With,x-access-token, Content-Type, Accept, Authorization, token, XMLHttpRequest"},body:JSON.stringify(bhu)});
pool.getConnection(function (err, connection) {
if (err) {
return callback(err, null);
}
var quer = `Insert INTO event (eventname,event_type,event_platform,event_date,co_host,stream_url,description,event_time,user_id,zoom_id,image,c_id) values ('${eventname}', '${event_type}', '${event_platform}', '${event_date}','${[co_host]}', '${stream_url}', '${description}','${event_time}','${event.pathParameters.user_id}','${zoom_id}','${bhu}','${c_id}')`;
connection.query(quer, [parseInt(event.pathParameters.user_id)], function (error, results, field) {
if (error) {
callback({
statusCode: 400,
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET,HEAD,PUT,POST,OPTIONS,UPDATE,DELETE",
"Access-Control-Allow-Headers": "Origin, X-Requested-With,x-access-token, Content-Type, Accept, Authorization, token, XMLHttpRequest",
"Access-Control-Allow-Credentials" : "true"
},
body: JSON.stringify(error)
}, null);
} else {
var insertId = results.insertId;
var getquer = `SELECT * FROM event WHERE id = ${insertId}`;
connection.query(getquer, function (error, result) {
if (error) {
callback({
statusCode: 400,
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET,HEAD,PUT,POST,OPTIONS,UPDATE,DELETE",
"Access-Control-Allow-Headers": "Origin, X-Requested-With,x-access-token, Content-Type, Accept, Authorization, token, XMLHttpRequest",
"Access-Control-Allow-Credentials" : "true"
},
body: JSON.stringify(error)
}, null);
} else {
var customRes = [];
customRes = {
"statusCode": 200,
"message": "event created successfully",
"data": result,
//"token data":decoded
};
callback(null, {
statusCode: 200,
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET,HEAD,PUT,POST,OPTIONS,UPDATE,DELETE",
"Access-Control-Allow-Headers": "Origin, X-Requested-With,x-access-token ,Content-Type, Accept, Authorization, token, XMLHttpRequest",
"Access-Control-Allow-Credentials" : "true"
},
body: JSON.stringify(customRes)
});
}
});
}
});
});
}
});
}
// });
// } else {
// var customRes = {};
// customRes = {
// "statusCode": 201,
// "message": "token is not provided",
// };
// callback(null, {
// statusCode: 201,
// headers: {
// "Access-Control-Allow-Origin": "*",
// "Access-Control-Allow-Headers": "Content-Type,x-access-token",
// "Access-Control-Allow-Methods": "OPTIONS,POST"
// },
// body: JSON.stringify(customRes)
// });
//}
};
父组件
"$emit('input', $event.target.value)"