flex布局中，最后一个元素居右展示以及input组件与内容一样宽

写项目时有一个想法，filestate组件里面就是下面报修项目以及报修内容中我希望采用flex布局，希望最后一个元素在最右边该如何实现了

<div class="filestate">
				<van-icon name="smile-comment-o" />
				<h1>报修人</h1>
				<input class="reportman" type="text" v-model="rname">
			</div>

.filestate input{
    border: none;
    background-color: rgba(0,0,0,0);
    font-size: .36rem;
    font-family: '楷体';
    line-height: .88rem;
    /* margin-left: auto; */
    width: auto;
}

可以通过设置margin-left:auto方法实现最后一个元素在最右边

但还有个问题就是如何使input的内容与元素内容一样宽，当时想的是能不能给width写一个auto就行了结果是不行

搜了一圈好像使用css只能通过计算多少个字来计算定宽才行，单纯用css并不能用所以只能通过js进行自定义。

一开始想的时在挂载时获取与之绑定的data数据的长度然后乘以设置的文字大小，但如果使用v-model绑定data数据的话，挂载时data数据没有完全渲染无法获取到长度甚至会报错

所以只能通过传统方法获取其值

resetinput(){
			let name = document.getElementById('reportman').value
			let phone = document.getElementById('reporphone').value
			console.log(phone.length+'哈'+name.length)
		}

能够得到长度了，现在就该设置input的长度了

//重置input长度
		resetinput(){
			let name = document.getElementById('reportman')
			let phone = document.getElementById('reporphone')
			let namelength = name.value.length*0.36
			name.style.width = namelength+'rem'
			
		}

好成功完成效果，剩下的在挂载页面时调用方法就行了

mounted () {
		var _this = this;
		_this.resetinput()
	}
	

好吧，一阵猛c结果是没搞清楚如何在钩子函数里面调用data数据，行吧，这波是我菜了