<script setup> import { ref ,reactive} from 'vue'; import Son from './Son.vue'; const yuangong=reactive({ xingxi:[ {id:1001,name:"张三",sex:"男",birthday:"5-13",site:"湖南",phone:123456212454,"money":1200}, {id:1002,name:"弹起",sex:"男",birthday:"1-23",site:"湖南",phone:123456622224,"money":2300}, {id:1003,name:"赵六",sex:"男",birthday:"2-17",site:"湖南",phone:123456622214,"money":5200}, {id:1004,name:"李四",sex:"女",birthday:"5-13",site:"湖南",phone:123452436654,"money":4200}, {id:1005,name:"王五",sex:"男",birthday:"2-13",site:"湖南",phone:123421221454,"money":1220} ] }) var zongmoney=ref(0) for(var i=0;i<=yuangong.xingxi.length-1;i++){ zongmoney.value+=yuangong.xingxi[i].money console.log(zongmoney.value) } var zhi=reactive({}) function dianji(id){ zhi=yuangong.xingxi[id] console.log(zhi) } </script> <template> <table> <thead> <tr> <td>编号</td><td>姓名</td><td>性别</td><td>生日</td><td>地址</td><td>电话</td><td>薪资</td> </tr> </thead> <tbody> <tr v-for="yg,index in yuangong.xingxi"> <td @click="dianji(index)">{{ yg.id }}</td><td>{{ yg.name }}</td> <td>{{ yg.sex }}</td><td>{{ yg.birthday }}</td> <td>{{ yg.site }}</td><td>{{ yg.phone }}</td><td>{{ yg.money }}</td> </tr> </tbody> 总薪资:{{ zongmoney }}<br> <Son :bianji="zhi"></Son> <input v-bind="zhi.id">{{ zhi }} </table> </template> 里input输入框接收不到值

在input标签中使用v-model绑定zhi.id即可接收到值，如下所示：

<input v-model="zhi.id">

相关问题

我说我返回按钮没反应 <button class="submit-button" @click="methods.saveForm()">提交</button> <button class="return-button" @click="goBack">返回</button> </a-form> </div> </template> <script setup> import { reactive } from "vue"; import { useRouter } from 'vue-router'; import axios from 'axios'; const { router } = useRouter(); const state = reactive({ vm: { production:{} } }); const methods = { saveForm() { axios.post('https://localhost:7126/api/Agv/getRdsAgvType', state.vm.production) .then(response => { console.log(response.data); alert('提交成功'); }) .catch(error => { console.log(error); alert('提交失败'); }); }, goBack() { console.log('goBack() method called'); router.back(); }, }; // defineExpose =( // {...methods} // ) </script>

根据你提供的代码，我注意到你使用了Vue.js和Vue Router来处理按钮点击事件。你的返回按钮使用了`@click="goBack"`来绑定一个名为`goBack`的方法。在这个方法中，你调用了`router.back()`来返回上一个页面。

如果你点击返回按钮后没有任何反应，这可能是由于以下几个原因：

1. Vue Router没有正确配置：请确保你在Vue Router中正确配置了路由。确保你的返回按钮位于需要返回的路由页面上，并且路由已经正确设置。

2. `router`对象未正确导入：请确保你正确导入了`useRouter`函数，并且将其赋值给了`router`变量。你可以通过在代码中添加`console.log(router)`来检查`router`对象是否定义和正确导入。

3. `goBack`方法未被正确调用：请检查是否有其他代码阻止了`goBack`方法的调用。例如，可能存在其他事件或条件判断阻止了按钮点击事件的触发。

通过检查以上几个方面，你应该能够找到导致返回按钮没有反应的原因，并解决该问题。

解析一下//父组件 <script setup> // This starter template is using Vue 3 <script setup> SFCs // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup import HelloWorld from './components/test3.vue'; const hello = (val) =>{ console.log('传递的参数是：'+ val); } </script> <template> <img alt="Vue logo" src="./assets/logo.png" /> <HelloWorld msg="传递吧" @hello="hello"> <template v-slot:cacao> <span>是插槽吗</span> </template> <template v-slot:qwe> <span>meiyou</span> </template> </HelloWorld> </template> //子组件 export default { name: 'test3', props: ['msg'], emits:['hello'], //这里setup接收两个参数，一个是props，一个是上下文context setup(props,context){ /** * props就是父组件传来的值，但是他是Porxy类型的对象 * >Proxy:{msg:'传递吧'} * 可以当作我们自定义的reactive定义的数据 */ /** * context是一个对象 包含以下内容： * 1.emit触发自定义事件的 * 2.attrs 相当于vue2里面的 $attrs 包含：组件外部传递过来，但没有在props配置中声明的属性 * 3.slots 相当于vue2里面的 $slots * 3.expose 是一个回调函数 */ console.log(context.slots); let person = reactive({ name: '张三', age: 17, }) function changeInfo(){ context.emit('hello', 666) } //返回对象 return { person, changeInfo } //返回渲染函数（了解） 这个h是个函数 //return () => h('name','age') } } </script>

这是一个Vue 3的单文件组件，包含父组件和子组件。父组件中通过import导入了一个名为HelloWorld的子组件，同时定义了一个函数hello用于处理子组件触发的自定义事件hello。在template标签中，使用了HelloWorld组件，并传递了一个props属性msg和一个自定义事件hello，同时使用了两个具名插槽cacao和qwe。

子组件中定义了一个名为test3的组件，通过props接收父组件传递的值msg，通过emits定义了一个自定义事件hello。在setup函数中，接收了props和context两个参数，其中props是父组件传递的值，context是一个对象，包含emit、attrs、slots和expose四个属性。通过reactive定义了一个名为person的响应式对象，以及一个名为changeInfo的函数，用于触发自定义事件hello。最后通过return语句将person和changeInfo返回，以供父组件使用。